title: How to update component state on redux state change?
body: <p>Since I have a component with forms, I need the forms to be connected to the component state. The initial data comes from Redux so try to initialize and update the component by setting the state with the props:</p>
  
  <pre><code>componentWillMount = () =&gt; {
    this.setState({
      language: this.props.language || 'en'
    })
  }
  </code></pre>
  
  <p><code>language</code> is a connected prop and I checked that it is updated in the store.</p>
  
  <pre><code>const mapStateToProps = state =&gt; ({
    language: state.language
  })
  </code></pre>
  
  <p>I also tried to use <code>componentWillReceiveProps</code> and <code>componentWillUpdate</code> but it doesn't work. I get the initial state, and even though the store and the connected props change, the component's state doesn't update.</p>
  
  <pre><code>{this.props.language} // updates
  {this.state.language} // doesn't change
  </code></pre>
  
  <p>What is the correct way to manage forms from Redux data?</p>
  
  <hr>
  
  <p>The <code>render</code> part:</p>
  
  <pre><code>render () {
    const {classes, theme, web} = this.props
  
    const language = (
      &lt;CardContent&gt;
        &lt;Typography type="headline"&gt;
          Language
        &lt;/Typography&gt;
        &lt;Divider/&gt;
        &lt;form className={classes.container} autoComplete="off"&gt;
          &lt;FormControl fullWidth margin="normal"&gt;
            &lt;InputLabel htmlFor="language"&gt;Select Block&lt;/InputLabel&gt;
            &lt;Select
              value={this.state.language} // &lt;==================== language
              onChange={this.handleLanguaheChange}
              input={&lt;Input id="language"/&gt;}
            &gt;
              &lt;MenuItem value={'en'}&gt;English&lt;/MenuItem&gt;
              &lt;MenuItem value={'he'}&gt;עברית&lt;/MenuItem&gt;
            &lt;/Select&gt;
          &lt;/FormControl&gt;
        &lt;/form&gt;
      &lt;/CardContent&gt;
    )
    ...
  
    return (
        &lt;Grid
          container
          spacing={theme.spacing.unit * 3}
          justify={'space-between'}
          className={classes.gridWrap}
        &gt;
          &lt;Grid item xs={6}&gt;
            &lt;Card className={classes.card}&gt;
              {language}
            &lt;/Card&gt;
  ...
  </code></pre>