CODEWITHSUNDEEP
reactjsreduxreact-redux
Lisa
Lisa

Reputation: 2989

How to reset children's component state in react

Here are my components for the app:

<SystemList />
<SystemDetail />
  <WorldList />
  <WorldDetail />

The data structure is that there are several systems, each system has several worlds. Each world has the detailed information.

In the react, when click each system, it has an action to get the activeSystem, then SystemDetail would render the information. Inside of the SystemDetail, it has two children component called WorldList and WorldDetail. When click the world list, there is an action to display the world detail information.

So my app works fine after click system list, it gets to the system detail, then after clicking the world list, it gets to the world detail. However, I had an problem to reset the world detail, which means when I click the system list again, the world detail still shows up the previous world.

I tried to set the key for the component, but it did not work. I also tried to pass the props, or reset the props, it did not work either.

How can I reset the state for the WorldDetail component after clicking the System in the SystemList? Does it make sense? Or maybe the mockup would make more sense.enter image description here

I am quite new to react and redux, so any help would be great!

Upvotes: 3

Views: 2643

Answers (1)

trquoccuong
trquoccuong

Reputation: 2873

You can use componentWillReceiveProps inside WorldDetail to change this state. When it receive new props from SystemDetail.

Upvotes: 6

Related Questions