title: changing state derived from props before render
body: <p>I have the following React <a href="https://material-ui.com/api/switch/" rel="nofollow noreferrer">MUI</a> Switch component which changes its ui state on the the prop <code>checked = {this.state.checked}</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Switch extends Component {
      state = { 
        active : this.props.contData.statesValue.active,
        checked: false
       }
      render() { 
          const { classes, theme } = this.props; 
          return ( 
              &lt;MuiSwitch checked={this.state.checked}/&gt;      
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The switch expects the checked prop to be a string , <code>'true'</code> | <code>'false'</code>.</p>
  
  <p>I am trying to set the checked prop using the state active : <code>this.props.contData.statesValue.active</code>, however, this is received as bool 0 1 and when passed into Switch props as <code>checked={this.state.active}</code> results in the error</p>
  
  <blockquote>
    <p>Failed prop type: Invalid prop <code>checked</code> supplied to <code>SwitchBase</code>.</p>
  </blockquote>
  
  <p>So my question is this  how can I change the incoming active prop from 0 1 to a string <code>'true'</code> | <code>'false'</code> prior to the component being rendered. Previously I would have looked towards the method componentWillReceiveProps, but seeing as this is now deprecated, any pointers on how I can achieve this would be welcomed.</p>