CODEWITHSUNDEEP
javascriptreactjsfetch
Mansur
Mansur

Reputation: 1829

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

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.

Upvotes: 0

Views: 1641

Answers (1)

The Reason
The Reason

Reputation: 7973

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

Upvotes: 1

Related Questions