title: React / Redux: focus input field in componentWillReceiveProps not working
body: <p>I have two components. When in component A somebody clicks a button, I want to focus an input field in component B.</p>
  
  <p>I am using Redux, and in my Redux store I save <code>dataInputFocus</code>, and whenever this is set true, I re-render my component &amp; want to focus the input field.
  This does not work however: <code>componentWillReceiveProps(nextProps)</code> is called  and it also goes into the <code>if</code> (I tried some <code>console.logs</code>), but <code>this.myInp.focus();</code> is just not working.</p>
  
  <pre><code>// Import React
  import React from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  
  import {addData, setInputFocus} from '../actions/index'
  
  // Create Search component class
  class Data extends React.Component{
  
    constructor(props) {
      super(props);
      this.state = { value: ""};
  
      this.handleInputChange = this.handleInputChange.bind(this);
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
  
    componentWillReceiveProps(nextProps){
        if(nextProps.applicationState.dataInputFocus) {
            this.myInp.focus();
        }
  
    }
  
    onFormSubmit(e) {
      e.preventDefault();
      this.setState({value: "" });
      this.props.addData(this.state.value, this.props.preferences.type);
    }
    handleInputChange(e) {
      this.setState({value: e.target.value })
    }
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.onFormSubmit}&gt;
            &lt;input
              placeholder="data"
              className="myInput"
              value={this.state.value}
              onChange={this.handleInputChange}
              ref={(ip) =&gt; this.myInp = ip}
            /&gt;
  
              &lt;button&gt;Add&lt;/button&gt;
  
  
  
              &lt;span&gt;{this.props.applicationState.dataInputFocus? 'TRUE' : 'FALSE'}&lt;/span&gt;
              {/*  I added this line in order to test whether this actually works, but also so that my component re-renders, since I would not actually use dataInputFocus anywhere other than in the conditional */}
          &lt;/form&gt;
  
          &lt;button onClick={() =&gt; {this.myInp.focus()}}&gt;Focus Input&lt;/button&gt;  {/* this however does(!) work */}
        &lt;/div&gt;
      );
    }
  
  }
  
  // Export Search
  function mapStateToProps (state) {
    return {
      data: state.data,
      preferences: state.preferences,
      applicationState: state.applicationState
    };
  }
  
  function matchDispatchToProps(dispatch) {
    return bindActionCreators({
      addData: addData
    }, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(Data);
  </code></pre>
  
  <p>This is the component which receives the props and contains the input field to be focused. Since it goes into <code>componentWillReceiveProps</code> and since I also checked that the props is actually changing and it goes into the <code>if</code> conditional, I assume that there is something wrong with this component, not my reducer / redux or the other component which contains the button and dispatches the action.</p>