Заполнение списка массивом элементов

Question

У меня есть массив элементов, и я получил доступ к одному из свойств элемента, чтобы разделить элементы на два отдельных массива. Но когда я пытаюсь заполнить созданный массив в компоненте DOM, выдает ошибку

Uncaught Error: Objects are not valid as a React child (found: object with keys {text, key, completedItem}). If you meant to render a collection of children, use an array instead.

Код выглядит следующим образом:

 render() {

    let { items } = this.props;

    let listItems = items.map( (item) => {
        return (
                <TodoItem text={item.text}
                          key={item.key}
                          ID={item.key}
                          isComplete={item.completedItem}
                          onDelete={this.props.onDelete}
                          onEdit={this.props.onEdit}
                          handleComplete={this.props.handleComplete} />
        );
    });

    const revArray = listItems.reverse();
    console.log("Reversed Array  : ", revArray);

    const completedItems = items.filter((item) => {
        return ( item.completedItem == true );
    });
    console.log("Items Completed Array  : ", completedItems);

    const filterCompleted = items.filter((item) => {
        return ( item.completedItem == false );

    });
    console.log("Items not Completed Array  : ", completedItems);

    const resultArrItems  = [ ...filterCompleted, ...completedItems];
    console.log("Final Array    : ", resultArrItems);

    return (
        <div className="card card-body mt-5">
            <ul className="list-group my-3">
                <h3 className="text-capitalize text-center"> todo list </h3>
                <div>{resultArrItems}</div>
            </ul>
        </div>
    );
}

Я получаю resultArrItems с Когда я просматриваю массив в консоли, мне нужен точный порядок элементов массива, но проблема в том, что я не могу заполнить компонент в DOM resultArrItems. Ошибка, которую я получаю, упомянута выше. Есть ли решение для этого ...? а также в чем причина такого поведения ...?

Answer 1

Вы можете представлять элементы только в render или return с синтаксисом JSX . В настоящее время вы пытаетесь отобразить массив - resultArrItems. Вам нужно использовать .map() и возвращать внутри действительный элемент JSX для каждой итерации.

Вы можете попробовать следующее:

return <div className="card card-body mt-5">
   <ul className="list-group my-3">
       <h3 className="text-capitalize text-center"> todo list </h3>
       <div>
          {
             resultArrItems.map((e, i) => <div key={i}>
                {i} {/* here you can access also each elements properties */}
             </div>)
          }
       </div>
   </ul>
</div>

Надеюсь, это поможет!