Initialize component state from parent props in reactjs

Question

My parent component in React is passing props to its AnchorPopover child like this:

<AnchorPopover 
   bannerHyperlinks={this.state.bannerHyperlinks}  
   hyperlinkTitle  ={this.props.hyperLink1Text} 
   hyperlinkHref   ={this.props.hyperlink1} 
   hyperlinkStyle  ={hyperlink1Style}
   onDetailsChange ={this.props.onHyperLink1DetailsChange}
/>

That AnchorPopover child looks like this:

var AnchorPopover = React.createClass({
  propTypes:{
    hyperlinkTitle: React.PropTypes.string.isRequired,
    hyperlinkHref: React.PropTypes.string,
    hyperlinkStyle: React.PropTypes.object.isRequired,
    bannerHyperlinks: React.PropTypes.object.isRequired,
    onDetailsChange: React.PropTypes.func.isRequired
  },

  getInitialState: function () {
    return {
      title: this.props.hyperlinkTitle,
      link: this.props.hyperlinkHref
    };
  },

  _onTitleChange: function () {
    var newTitle = event.target.value;
    this.setState({
      title: newTitle
    });
  },

  _onLinkChange: function () {
    var newLink = event.target.value;
    this.setState({
      link: newLink
    });
  },

  _onLinkSelect: function () {
    var newLink = event.target.value;
    this.setState({
      link: newLink
    });
  },

  _onSave: function () {
    var title = this.state.title;
    var link = this.state.link;
    this.props.onDetailsChange(title, link);
  },

  onCancel: function () {
    var title = this.props.hyperlinkTitle;
    var link = this.props.hyperlinkHref;
    this.props.onDetailsChange(title, link);
  },

  render: function () {
    var optGroups = [];
    for (var optGroupsHeading in this.props.bannerHyperlinks) {
      optGroups.push(
        <Optgroup 
          label={optGroupsHeading} 
          group={this.props.bannerHyperlinks[optGroupsHeading]}
        />
      );
    }
    var overlay =  (
      <Popover title={this.state.title}>
        <Input onChange={this._onTitleChange}
          required type="text"
          placeholder="Enter Link Title"
          label="Title"
          value={this.state.title}
        />
        <Input
          onChange={this._onLinkChange}
          required type="text"
          placeholder="Enter Link Href"
          label="Href"
          value={this.state.link}
        />
        <Input type="select" onChange={this._onLinkSelect} defaultValue={this.state.link}>
          {optGroups}
        </Input>
        <Button bsStyle='primary' onClick={this._onSave}>Save</Button>
        <Button bsStyle='danger' onClick={this._onCancel}>Cancel</Button>
      </Popover> 
    );

    return (
      <OverlayTrigger trigger="click" placement='left' overlay={overlay}>
        <a style={this.props.hyperlinkStyle} target="_blank" className="banner_hyperlink" href='javascript:void 0;'>
          {this.props.hyperlinkTitle}
        </a>
      </OverlayTrigger>
    );
  }
});

module.exports = AnchorPopover;

What I want to achieve is to maintain the editing state inside the child component and pass the final state of child to the parent using callback, but the issue I am facing is the initial state is not getting populated with the properties that are being passed from parent component. Am I doing it incorrectly or is there some other problem I need to look into?

Answer 1

Use componentWillReceiveProps(nextProps) and change the state here.

For example

componentWillReceiveProps(nextProps){
    this.setState({ statename : newstatevalue here..... })
}

This way the child state can be updated when ever the parent component changes the state where the parent state is passed as a property to the child.

For more details, you can refer - componentwillreceiveprops