title: How can I create an array of states in React using hooks?
body: <p>I have a number, <em>n</em>, that can be any value and I want to render <em>n</em> input fields while keeping track of each input's state but I'm having trouble figuring out how. For example, if <em>n = 3</em>, I want to render something like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;input onChange={(e) =&gt; setValue1(e.target.value)}/&gt;
      &lt;input onChange={(e) =&gt; setValue2(e.target.value)}/&gt;
      &lt;input onChange={(e) =&gt; setValue3(e.target.value)}/&gt;
  &lt; /div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In this example, I would manually need to create three states: value1, value2, value3. My goal is to have it dynamic so if in the future I change <em>n</em> to 4 or any other number, I don't have to manually create more states and mess with the component. Is there a good way to accomplish this using hooks?</p>