title: Dynamically create components that takes in setState
body: <p>I have to use a Select component that takes in a <code>value</code> argument and a <code>setValue</code> argument. Where I need to pass in a state and a set state.</p>
  
  <p>eg:</p>
  
  <pre><code>const [value, setValue] = useState();
  ...
  return (
      ...
      &lt;Select value={value} setValue={setValue} options={optionsArray}/&gt;
  )
  </code></pre>
  
  <p>Now I need to dynamically create multiple of these <code>Select</code> components based on an user input. How do I declare my <code>state</code> and <code>setState</code> variables for this task? </p>
  
  <p>I was thinking of using <code>state</code> as an object array, eg. <code>value['option1']</code> but I can't figure out how I can pass in the <code>setValue</code> part, so far I have tried passing in a custom function such as: </p>
  
  <pre><code>const setOptionValue = (value) = {
      value.push({option1: value})
  }
  </code></pre>
  
  <p>However I am stuck because <code>setOptionValue</code> method does not know what the corresponding <code>option</code> is (doesn't know which one of the select field the user changed)</p>
  
  <p>Any tips on how to solve this situation?</p>