title: Initialize component state from parent props in reactjs
body: <p>My parent component in React is passing props to its <code>AnchorPopover</code> child like this:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>&lt;AnchorPopover 
     bannerHyperlinks={this.state.bannerHyperlinks}  
     hyperlinkTitle  ={this.props.hyperLink1Text} 
     hyperlinkHref   ={this.props.hyperlink1} 
     hyperlinkStyle  ={hyperlink1Style}
     onDetailsChange ={this.props.onHyperLink1DetailsChange}
  /&gt;
  </code></pre>
  
  <p>That <code>AnchorPopover</code> child looks like this:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>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(
          &lt;Optgroup 
            label={optGroupsHeading} 
            group={this.props.bannerHyperlinks[optGroupsHeading]}
          /&gt;
        );
      }
      var overlay =  (
        &lt;Popover title={this.state.title}&gt;
          &lt;Input onChange={this._onTitleChange}
            required type="text"
            placeholder="Enter Link Title"
            label="Title"
            value={this.state.title}
          /&gt;
          &lt;Input
            onChange={this._onLinkChange}
            required type="text"
            placeholder="Enter Link Href"
            label="Href"
            value={this.state.link}
          /&gt;
          &lt;Input type="select" onChange={this._onLinkSelect} defaultValue={this.state.link}&gt;
            {optGroups}
          &lt;/Input&gt;
          &lt;Button bsStyle='primary' onClick={this._onSave}&gt;Save&lt;/Button&gt;
          &lt;Button bsStyle='danger' onClick={this._onCancel}&gt;Cancel&lt;/Button&gt;
        &lt;/Popover&gt; 
      );
  
      return (
        &lt;OverlayTrigger trigger="click" placement='left' overlay={overlay}&gt;
          &lt;a style={this.props.hyperlinkStyle} target="_blank" className="banner_hyperlink" href='javascript:void 0;'&gt;
            {this.props.hyperlinkTitle}
          &lt;/a&gt;
        &lt;/OverlayTrigger&gt;
      );
    }
  });
  
  module.exports = AnchorPopover;
  </code></pre>
  
  <p>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?</p>