How to render array of object in ReactJS

Question

I want to get list of users using reactJS 15.5 , Code:

 constructor(props) {
   super(props);
        this.state = {
            values: []
        };
        this.getDataFromUser = this.getDataFromUser.bind(this);
    }

 render() {
        return (
            <div>
                <button onClick={this.getDataFromUser}>Fetch</button>
                <p>
                    {this.state.values}
                </p>
            </div>
        );
    }

 getDataFromUser(){
        fetch('http://localhost:8000/api/user')
            .then(response => response.json())
            .then(json => {
                console.log(json);
                this.setState({values: json })
        })
    }

In console.log(json) , i get

But i get this error when i click in button Fetch so error in getDataFromUser:

Unhandled Rejection (Invariant Violation): Objects are not valid as a React child (found: object with keys {id, nom, prenom, email,is_admin,created_at, updated_at}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

There's a why to create user object, So anyone can help me to resolve this issue and thanks

Answer 1

Its an array of objects so you need to use map to iterate the array then render the specific values.

Like this:

render() {
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {this.state.values.map(el => {
                    return <div key={el.id}>
                       <span>{el.email}</span>
                       <span>{el.nom}</span>
                       <span>{el.is_manager}</span>
                    </div>
                })}
            </p>
        </div>
    );
}

Answer 2

You are trying to return an invalid object/array in your react component. In your case you should try and iterate through the array(this.state.values) and render the items(string values) needed.

 render() {
    const { values } = this.state;
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {values.map((value, index) => 
                    (<div key={index}>{value.nom}</div>)
                )}
            </p>
        </div>
    );
}

Looking at the error it looks like the new state of this.state.values is rather an object with the following keys {id, nom, prenom, email,is_admin,created_at, updated_at}. So the below code would work for u.

render() {
    const { values } = this.state;
    return (
        <div>
            <button onClick={this.getDataFromUser}>Fetch</button>
            <p>
                {values &&
                  <div>
                    {values.nom}
                    {values.prenom}
                    {values.email}
                    etc.
                  </div>
                }
            </p>
        </div>
    );
}