CODEWITHSUNDEEP
javascriptreactjs
rockwire
rockwire

Reputation: 95

How would you use componentDidUpdate to update something without having to refresh the page?

So the F displays the # of movies favorited state and W represents the # of movies watched state.

enter image description here

I made a button that clears the # of favorites movies to 0 but for it to be updated I have to refresh the page. How would I use the componentDidUpdate lifecycle to update it without refreshing the page?

Could you just explain me the process?

Upvotes: 0

Views: 500

Answers (2)

Krina Soni
Krina Soni

Reputation: 930

If you're getting the values in this.props then one thing you can do in componentDidUpdate is, 

componentDidUpdate(prevProps) {
  if (this.props !== prevProps) {
    //update the state for movies favorited & movies watched.
  }
}

Another soln is, Initialize two states and then setState in componentDidMount in case of api call response.

And if those are coming from props, Use componentWillReceiveProps that will give you updated props in nextProps. 

componentWillReceiveProps = (nextProps) => {
  this.setState({m_fav : nextProps.fav, m_watch: nextProps.watch})
}

Upvotes: 1

christopher_pk
christopher_pk

Reputation: 651

I think you should put your # of movies as a state, and I think componentDidUpdate isn't the best approach, you simply need a button onClick listener.

In your constructor.

constructor(props) {
  super(props);
  this.state = { movies: 0 }; // or movies: [] empty array
}

Then in your button component.

<button
  onClick={() => {
    this.setState({ movies: 0 });
  }}
/>

Upvotes: 1

Related Questions