lost9123193 lost9123193 - 3 months ago 22
Javascript Question

Updating React state after Finished Rendering

I'm learning about react's lifecycle methods and I'm wondering how to best address this scenario:

I have a component that fetches information about someone's hobbies

componentWillMount() {
this.props.fetchHobbies(this.props.params.id);
}


The data is sent to a reducer which is mapped as a prop at bottom of the component

function mapStateToProps(state) {
return {
hobbies:state.hobbies.user
};
}


I have a component called twitterbootstrap which relies on my component's state to see what rows are selected.

const selectRowProp = {
mode: 'radio',
clickToSelect: true,
bgColor: "rgba(139, 195, 74, 0.71)",
selected: this.state.selected,
};


Here's my question. I want to access
this.props.hobbies.selected
.

--UPDATE I'm using componentWillRecieveProps as it has a setState option.

componentWillReceiveProps(nextProps){
this.setState({selected:next.props.hobbies })
}


I want to use this.props.hobbies.selected as the next prop to be recieved. How would I incorporate that?

Answer

nextProps is the props object that is passed after the first rendering. there is nothing called next.props in the function componentWillReceiveProps. you can do something like that.

componentWillReceiveProps(nextProps){
    this.setState({selected:nextProps.hobbies })
}