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

Show the JSON response and if you are getting array of user use that to display inside some markup. — Rohit Choudhary
– Rohit Choudhary, Commented May 24, 2017 at 9:58

Mayank Shukla · Accepted Answer · 2017-05-24 10:25:53Z

2

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>
    );
}

answered May 24, 2017 at 10:25

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A.khalifa Over a year ago

i am a newbie to react, i want to ask you if this best way to get and parse json ? and it possible to create user with nom, id ..., and use in all component and thanks

Mayank Shukla Over a year ago

both the libs are good, but they handle the things differently. check this link for difference and benefits of axios and fetch call: medium.com/@shahata/…

Mayank Shukla Over a year ago

if the data that you are fetching is fixed means not dependent on any user input then you can make this call inside componentDidMount method directly instead of making that on button click. facebook.github.io/react/docs/…

philip_nunoo · Accepted Answer · 2017-05-24 10:13:39Z

1

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>
    );
}

edited May 24, 2017 at 10:13

answered May 24, 2017 at 10:01

philip_nunoo

9384 gold badges10 silver badges22 bronze badges

9 Comments

A.khalifa Over a year ago

@collison thank you to answer to this question, but not working for me

philip_nunoo Over a year ago

to make the second code work in your constructor, remove this.state = { values: [] };

A.khalifa Over a year ago

i get array of object [OBJECT,OBJECT,OBJECT...] in each object i have nom, email ....

philip_nunoo Over a year ago

Then you'd need to use the first code if you are returning an array. And retain this.state = { values: [] } in your constructor.

philip_nunoo Over a year ago

made changes to the first code please refer. And let me know

|

Collectives™ on Stack Overflow

How to render array of object in ReactJS

2 Answers 2

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related