React setState with data from mongoDB

Question

in my react app I have an array with the following structure as a state:

 data: {
   nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }],
   links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }]
}

The data is initially empty. What I am trying to do, is to set the data state with data retrieved from my mongoDB. An example of the JSON from the database is this:

{
    "_id": {
        "$oid": "5c3a368dfb6fc0600bdedf49"
    },
    "nodes": [
        {
            "id": "root"
        },
        {
            "id": "input"
        },
        {
            "id": "component"
        }
    ],
    "links": [
        {
            "source": "component",
            "target": "root"
        },
        {
            "source": "input",
            "target": "root"
        }
    ]
}

Within the componentDidMount() in my react app I am fetching the data with the following code

    fetch('link')
    .then(data => json())
    .then((res) => {
      if (!res.success) this.setState({error: res.error});
    else console.log(res.data);
  }
});

Finally, this is what I am getting back form the console.log:

[…]

 0: {…}

_id: "5c3a368dfb6fc0600bdedf49"

 links: (2) […]

 0: Object { source: "component", target: "root" }

 1: Object { source: "input", target: "root" }

length: 2

 <prototype>: Array []

 nodes: (3) […]

 0: Object { id: "root" }

 1: Object { id: "input" }

 2: Object { id: "component" }

length: 3

 <prototype>: Array []

 <prototype>: Object { … }

length: 1

So, I haven't figured out how to set the state with these data and put it in the data state with the proper structure. Any advice will be helpful, thank you!

wlecki · Accepted Answer · 2019-01-13 12:36:06Z

1

Will the backend always return links and nodes arrays?
If yes, you can do:

this.setState({
    data: {
        nodes: res.data.nodes,
        links: res.data.links,
    }
});

If not, you have to check if nodes or links are returned from the api call and update the state respectively only for the data that has been returned.

answered Jan 13, 2019 at 12:36

wlecki

3602 silver badges8 bronze badges

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

3 Comments

Konstantinos Ks Over a year ago

Thank you a lot for your answer! When I am setting the state with res.data.nodes, I get "undefined" returned. The problem seems to be solved when I use res.data[0].nodes. I believe this will not cause any problems in the future. Thank you again.

wlecki Over a year ago

@KonstantinosKs - so it looks like your backend is returning an array of data - maybe it is something that can be changed so that you don't need to access the first index so you will be able to just go with res.data.nodes?

Konstantinos Ks Over a year ago

I will try if I can change the way the data is returned. If I find something I will post it here.

Collectives™ on Stack Overflow

React setState with data from mongoDB

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related