title: Why cant react set initial state based on props
body: <p>I have a es6 react component that I want the initial value of the state to depend on that of the passed down prop, but its value is always false:</p>
  
  <p>AttachStateToProps component</p>
  
  <pre><code>&lt;AttachStateToProps VALUE=false /&gt;
  </code></pre>
  
  <p>AttachStateToProps component:</p>
  
  <pre><code>class AttachStateToProps extends React.Component {
    state = {
      stateValue: this.props.VALUE,
    }
    render() {
      console.log('Value of Prop - ', this.props.VALUE)
      console.log('Value of State - ', this.state.stateValue)
  
    return null
    }
  }
  </code></pre>
  
  <p>Every time the value of the prop VALUE is changed, I get:</p>
  
  <pre><code>`Value of Prop - false` // this changes whenever I change prop value in 
     &lt;AttachStateToProps /&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>`Value of State - false` // this does not change accordingly.
  </code></pre>
  
  <p>I figure <a href="https://stackoverflow.com/a/49222715/7015414">it could be something to do with state/setState being async</a> and older <a href="https://stackoverflow.com/questions/36243272/using-props-to-seed-initial-state-in-react-without-using-react-createclass?rq=1"><code>getinitialState</code></a> but I don't get why it.</p>