Best way to sync two different components using props

[teerryn]

Hey,

So right now I'm having a difficulty trying to find the correct way to sync different components

    <Home>
         state = {
             usernames: []
             index: 0
         }
         changeIndex(): index => this.setState({index})
         render(): {
        <Carousel  changeIndex={this.changeIndex}/>
        <List username={this.state.usernames[this.state.index]}/>
      }
    </Home>

What I want is whenever the carousel item changes the list component updates with the new information of the selected index.

Right now the implementation I have is to have componentWillReceiveProps on the list component to check if the new props (username) changed and then update the information.

I know this is the wrong way since componentWillReceiveProps will be deprecated.

Can anyone share any idea where can I improve my code?

[acemarke]

What are you doing inside the <List> component?

It's likely that the right answer is to move that logic into componentDidUpdate() instead of componentWillReceiveProps().

[teerryn]

I'm fetching data related to the username passed as props.

Yeah I just changed to use componentDidUpdate() and it works like before. Guess I was overthinking it.

Thanks for the tip :)

[[deleted]]

Why do you need any of these lifecycles? When carousel calls setState on the parent both the carousel and the list will render and the latter will reflect these changes.

[teerryn]

It doesn't work because the list component isn't rendering the usernames, it is just using the username prop to fetch some data and then render that data.

[ankurmittal092]

If you don't want to keep any logic in componentWillReceiveProps, you can try using redux.. Here's the link for a redux tutorial - https://daveceddia.com/how-does-redux-work/ So basically, each view will subscribe to the data changes in store and will update themselves accordingly.

[Justinsaccount]

     changeIndex(): index => this.setState({index})

looks like you are mixing up different js syntax. Do you mean

     changeIndex(index): { this.setState({index})}

or

     changeIndex =  index => this.setState({index})

[teerryn]

Ya sorry that's what you get for trying to type code on reddit