title: React hook - onFocus and onBlur
body: <p>I have changed the code from components to hooks.
  I'm completely new to it and i'm learning react
  and i need help to change it to hooks
  what should i do to make it work on functional react ?</p>
  <ul>
  <li>update:</li>
  </ul>
  <ul>
  <li>I have issued the solutions bellow but when i click on the input it takes me to the top of the page</li>
  </ul>
  <pre><code>  const [nameFocused, setNameFocused] = useState(true);
  &lt;FormGroup
                      className={classnames(&quot;mt-5&quot;, {
                        focused: nameFocused,
                      })}
                    &gt;
                      &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                        &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                          &lt;InputGroupText&gt;
                            &lt;i className=&quot;ni ni-user-run&quot; /&gt;
                          &lt;/InputGroupText&gt;
                        &lt;/InputGroupAddon&gt;
                        &lt;Input
                          placeholder=&quot;Your name&quot;
                          type=&quot;text&quot;
                          onFocus={(e) =&gt; setNameFocused(true)}
                          onBlur={(e) =&gt; setNameFocused(false)}
                        /&gt;
                      &lt;/InputGroup&gt;
                    &lt;/FormGroup&gt;
  </code></pre>
  <p>Not relevant:</p>
  <pre><code>&lt;FormGroup
                      className={classnames(&quot;mt-5&quot;, {
                        focused: state.nameFocused,
                      })}
                    &gt;
                      &lt;InputGroup className=&quot;input-group-alternative&quot;&gt;
                        &lt;InputGroupAddon addonType=&quot;prepend&quot;&gt;
                          &lt;InputGroupText&gt;
                            &lt;i className=&quot;ni ni-user-run&quot; /&gt;
                          &lt;/InputGroupText&gt;
                        &lt;/InputGroupAddon&gt;
                        &lt;Input
                              placeholder=&quot;Your name&quot;
                              type=&quot;text&quot;
                              onFocus={e =&gt; this.setState({ nameFocused: true })}
                              onBlur={e =&gt; this.setState({ nameFocused: false })}
                            /&gt;
                      &lt;/InputGroup&gt;
                    &lt;/FormGroup&gt;
  ``
  </code></pre>