CODEWITHSUNDEEP
javascriptreactjscomponentsstate
lost9123193
lost9123193

Reputation: 11030

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?

Upvotes: 0

Views: 4302

Answers (1)

Rafi Ud Daula Refat
Rafi Ud Daula Refat

Reputation: 2257

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 })
}

Upvotes: 2

Related Questions