title: Update this.state conditionally when rendering component in React?
body: <p>I have a time picker that I want to set the value to <code>this.state.start</code>. However the value of <code>this.state.start</code> could be equal to <code>this.props.normal</code> or <code>this.props.spec</code> depending on whether the user has set special hours, if they have not then it falls back to using normal hours.</p>
  
  <p>I'm running into an issue trying to do <em>if-else</em> statements to update the state of <code>this.state.start</code>. While it should update the value correctly (if-else statements should be correct), react doesn't allow you to update the state in the render function like I've written. How can I set <code>this.state.start</code> conditionally? Code below:</p>
  
  <pre><code>class NormalHours extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          start: null,
      }
  }
  render() {
      //Browser is very angry at this part
      if(this.props.specStart == this.props.normStart || this.props.specStart == null)
      {
          //If special hours are null or equal to normal start use normal hours
          this.setState({
             start: this.props.normStart;
          });
      }
      else
      {
          //Else the hours are different so use special hours
          this.setState({
             start: this.props.specStart;
          });
      }
      return(
      &lt;div&gt;
          //Using Material UI; this is rendered as a textbox
          &lt;TimePicker
            name="StartTime"
            onChange={(e, date) =&gt; {
              this.props.onSetStartTime(Utils.convertDateToTimeString(date))
            }}
            value={this.state.start}
            /&gt;
  </code></pre>