How to add objects retrieved from fetch request to the state array in React and then update the view?

Question

I'm trying to learn React by building a "movie search app". The main problem is that, I have an array of request URLs and I want to retrieve each object and push them into a state array and then update the state, however pushing to the state array doesn't work.

promises = arr.map(el=>fetch(requesturl).then(e=>e.json()))
result = promises => Promise.all(promises).then(value=>console.log(value));

The code looks something like this. Instead of printing them into the console, I want to save all of them and then update the view.

Apologies, if the question is unclear.

Right, you don't push to the state array. You should create a copy of the array, append the new resuts, then setState in the component with the new array — Geuis
– Geuis, Commented Jul 14, 2018 at 21:46
did you mean this? result = promises => Promise.all(promises).then(value=>{ let arr = this.state.titles.concat(value); this.setState({titles : arr}); }); — Mansur
– Mansur, Commented Jul 14, 2018 at 21:51
Already did that, but the problem is that page is not loading. It looks like it is, but never finishes. I don't know why. By the way, it is correct to call this method in componentDidUpdate? Because I did it so that the view would be updated when state changes. — Mansur
– Mansur, Commented Jul 14, 2018 at 21:55

The Reason · Accepted Answer · 2018-07-14 22:44:00Z

1

You can do it simply in a then after Promise.all like so:

const arr = ['google.com', 'youtube.com']

class MoviesList extend Component{
  state = { movies: [] }

  componentDidMount(){
    const promises = arr.map(el=>fetch(requesturl).then(e=>e.json()));
    Promise.all(promises).then(movies => this.setState(movies));
  }

  render(){
    return <div>{JSON.stringify(this.state.movies)}</div>
  }
}

Worked jsfiddle

edited Jul 14, 2018 at 22:44

answered Jul 14, 2018 at 21:54

The Reason

8,0135 gold badges27 silver badges43 bronze badges

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

2 Comments

Mansur Over a year ago

Tried it, returns an empty array :/

The Reason Over a year ago

@MensurQulami i added worked example :) Please check it

Collectives™ on Stack Overflow

How to add objects retrieved from fetch request to the state array in React and then update the view?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related