title: On input focus change parent class in React
body: <p>I'm trying to toggle a class on the parent of the input field when you click in it or focus on it. I'm facing two issues. First, why is my onFocus called on render without me even clicking inside the field? Second, do I need a separate isActive state for each input field or is there a better approach? I Asked because potentially my form could have many more input fields. And I would need a state to capture value for each anyways. Does this mean I need two states per input?</p>
  
  <pre><code>export default class ContactForm extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isActive: false
    }
  
    onFocus(e) {
      console.log(e);
      // setState for each input field here.
    }
  
    render() {
      return (
          &lt;div className="contact-form"&gt;
            &lt;h2&gt;Contact Form&lt;/h2&gt;
            &lt;form&gt;
              &lt;div className={isActive ? 'textfield is-focused': 'textfield'}&gt;
                &lt;label htmlFor="inputName"&gt;Name&lt;/label&gt;
                &lt;input type="text" 
                       id="inputName 
                       ref="_name" 
                       onFocus={this.onFocus('name')} 
                /&gt;
              &lt;/div&gt;
              &lt;div className={isActive ? 'textfield is-focused': 'textfield'}&gt;
                &lt;label htmlFor="inputEmail"&gt;Email&lt;/label&gt;
                &lt;input type="email" 
                       id="inputEmail" 
                       ref="_email" 
                       onFocus={this.onFocus('email')} /&gt;
              &lt;/div&gt;
              &lt;input type="submit" value="send message" /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>