mapping json from a fetch function into setstate

Question

I am trying to map a json response into a state, what I am trying to do is map all the children of this array no matter how many, as in skipping the first array and only show its children, here is what i tried to do

fetch(api).then((response) => {
  response.json()  .then((data) => {
    data.children.map( (menu) => {

      this.setState({
        mydata: menu
      })
}) console.log("test", this.state.mydata )})  
    });

this is what i receive from the api

  {
    "name": "Store 1",
    "children": [
      {
        "name": "Store 1",
        "children": [{},{}...]
      },
      {
        "name": "Store 2",
        "children": [{},{}...]
      }
    ]
  }

and this is how i want it stored in my state,

[
          {
            "name": "Store 1",
            "children": [{},{}...]
          },
          {
            "name": "Store 2",
            "children": [{},{}...]
          }
      ]

Invoking this.setState() in loop over the same key is the issue.. — Rayon
– Rayon, Commented Oct 20, 2019 at 3:45
my goal is to have them mapped and stored to a state, instead of storing it and then mapping it in the render return — Alpub
– Alpub, Commented Oct 20, 2019 at 3:47
I would suggest mapping your array and then setting it in state once. — Rayon
– Rayon, Commented Oct 20, 2019 at 3:48

Nicky Prabowo · Accepted Answer · 2019-10-20 04:45:41Z

1

there's no need to map it. You should just put it into state.

fetch(api)
 .then(response => response.json())
 .then(data => this.setState({
  myData: data.children
 }))

answered Oct 20, 2019 at 4:45

Nicky Prabowo

1229 bronze badges

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

Collectives™ on Stack Overflow

mapping json from a fetch function into setstate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related