title: Get default state value by receiving prop data - React
body: <p>I'm new to <code>react.js</code>.
  I'd like to get default value of state <code>following_status</code> by receiving <code>props.user.following_status</code>.</p>
  
  <p>I'm passing user object ( <code>user = { following_status: 'following', id:123 }</code> ) to <code>ReactionButton</code> component. <code>ReactionButton</code> component is looks like this:</p>
  
  <pre><code>class RelationButton extends React.Component {
  
    constructor(props){
      super(props);
      console.log(props.user.following_status) #  undefined!!!
  
      this.state = {
        following_status: props.user.following_status
      }
  ...
      render() {
         if (this.state.following_status == 'following') {
           &lt;UnFollowBtn/&gt;
         } else {
           &lt;FollowBtn/&gt;
         }
      }
  </code></pre>
  
  <p><code>RelationButton</code> was called by  <code>UserCardHeader</code> component.</p>
  
  <pre><code>const UserCardHeader = (props) =&gt; {
    const user = props.user;
    return(
      &lt;header className="user-card--full__header"&gt;
        &lt;RelationButton user={user}&gt;&lt;/RelationButton&gt;
      &lt;/header&gt;
    )
  }
  </code></pre>
  
  <p>I don't understand why <code>console.log(props.user.following_status)</code> returns <code>undefined</code>. I googled many websites like those:</p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props">React component initialize state from props</a> </p></li>
  <li><p><a href="https://stackoverflow.com/questions/43559509/accessing-props-inside-react-constructor">accessing props inside react constructor</a> </p></li>
  </ul>
  
  <p>those answers suggest</p>
  
  <pre><code>class FirstComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            x: props.initialX
          };
      }
  }
  </code></pre>
  
  <p>but this didn't work for me.</p>
  
  <p>If I add <code>componentWillReceiveProps</code> to the codes above,</p>
  
  <pre><code>  componentWillReceiveProps(props){
      console.log(props.user.following_status)   #=&gt; "following"
      this.setState({following_status: props.user.following_status})
    }
  </code></pre>
  
  <p>everything works well. However I think it's weird solution and sometimes doesn't work. Why can't I receive object props in <code>constructor(props) {}</code> section?</p>