Add class on focus change using Redux and React
<p>I'm trying to add a class to a div wrapping an input on focus with Redux and React.</p>

<p>My React component looks like this:</p>

<pre><code>import React from 'react'

const Input = ({ value, onChange }) =&gt; (
  &lt;div className=""&gt;
    &lt;input type="email" onChange={onChange} value={value} /&gt;
  &lt;/div&gt;
)

export default Input
</code></pre>

<p>When a user focuses on the input, I want the class <code>selected</code> to be added to the div. The component is connected using <code>react-redux</code>.</p>

<p>The two ways I've tried so far:</p>

<h3>Attempt 1</h3>

<p>Add an onFocus listener to the input and dispatch an action that adds the inputs focus state into the inputs state , for example:</p>

<pre><code>{
  value: '',
  focused: true
}
</code></pre>

<p>If focused is true, add the class with <code>className={focused ? 'selected' : ''}</code></p>

<p>My concern with this approach is I could get into issues where multiple inputs have <code>focused: true</code>. So I'd have to manage that myself and look through the whole input state and reset to false before setting focus on a new input. </p>

<h3>Atempt 2</h3>

<p>Add an onFocus listener to the input and dispatch an action that contains the ID of the focused input and store the ID in the state. This would solve the issue of having to reset all other inputs to false.</p>

<p>My concern with this is I'd have to give every input I wanted this feature on a unique ID (this could possibly use Reacts ID). I'd have to add something like <code>className={ID === focusedID ? 'selected' : '')</code></p>

<hr />

<p>I feel like there must be a better way to achieve this. Any help would be appreciated.</p>

<p>Thanks</p>