reactjs - Render an array of objects react

Question

This is parent object:

import React, { Component } from "react";
import uuid from 'react-uuid';
import Context from "../../context/Context";
import ItemInput from "./input-components/ItemInput";

export default class InputContainer extends Component {
constructor(props) {
    super(props);

    this.state = {
        name: '',
        item: {
            id: '',
            toDo: ''
        },
        listItems: []
    };

    this.onItemChange = this.onItemChange.bind(this);
    this.onItemAdd = this.onItemAdd.bind(this);
}

onItemChange(event) {
    this.setState({
        item: {
            id: uuid(),
            [event.target.name]: event.target.value
        }
    });
}

onItemAdd(event) {
    event.preventDefault();

    const { item } = this.state;
    this.setState({ listItems: [...this.state.listItems, item] });
    document.getElementById('formItem').reset();
}


render() {
    const currentItem = this.onItemChange;
    const addItem = this.onItemAdd;
    const listItems = this.state.listItems;

    return (
        <div className="box">
            <Context.Provider
                value={{ currentItem, addItem, listItems }}
            >
                <DisplayItems />
                <ItemInput />
            </Context.Provider>
        </div>
    );
}

}

ItemInput:

import React, { useContext } from "react";
import Context from "../../../context/Context";

export default function ItemInput() {
const { currentItem, addItem } = useContext(Context);

return (
    <form className="item" id="formItem">
        <input
            onChange={currentItem}
            type="text"
            className="newInput"
            name="toDo"
            placeholder="New Task"
            autoComplete="off"
        />
        <button onClick={addItem} className="checkButton">
            <i className="fas fa-check fa-sm"></i>
        </button>
    </form>
);

}

DisplayItems:

import React, { useContext } from "react";
import Context from "../../../context/Context";

export default function DisplayItems() {
const { listItems, removeItem } = useContext(Context);
return (
    <div>
        {listItems.map((item) =>
            <div className="item" key={item.id} >
                <input type="checkbox" />
                <p className="listItem">{item}</p>
                <button
                    className="delete-btn"
                    type="submit"
                    onClick={removeItem.bind(this, item.id)}
                >
                    <i className="far fa-trash-alt fa-sm"></i>
                </button>
            </div>
        )}
    </div>
)

}

When im trying to add new object console gives me this error:

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

As far as i understand there's something wrong in my Display Items rendering function, can you suggest whats wrong pls?

question from:https://stackoverflow.com/questions/65894908/render-an-array-of-objects-react

Answer 1

item is an object, that why react yelling the error at you. React cant render an object.

// You previously define item as an object: item: { id: '', toDo: ''}
// So the JSX below result in error
<p className="listItem">{item}</p>

Beside JSX, expressions inside render function should return a string (or can be convert to a string). So it should be something like

<p className="listItem">{item.toDo}</p>