title: Handle multiple input boxes rendered using map function javascript
body: <p>I am working on a react where I am dealing with dynamic number of input fields as I am rendering them using <code>arr.map</code> function. But How can I handle the input onChange method with so many input fields?</p>
  <p>Here's my component:</p>
  <pre><code>this.props.setsList.map((codeset, index) =&gt; (
       &lt;Table.Row key={codeset.code_system_id}&gt;
         &lt;Table.Cell&gt;{index + 1}&lt;/Table.Cell&gt;
         &lt;Table.Cell&gt;{codeset.name}&lt;/Table.Cell&gt;
         &lt;Table.Cell&gt;
           &lt;Input
             type='text'
             className='form-control'
             value={codeset.code}
             placeholder={translateText('Code')}
             onChange={() =&gt; this.handleCodeChange(event, index)}
             style={{ height: '70%' }}
           /&gt;
         &lt;/Table.Cell&gt;
         &lt;Table.Cell&gt;
           &lt;Input
             type='text'
             className='form-control'
             value={codeset.description}
             placeholder={translateText('Code Description')}
             onChange={() =&gt; this.handleCodeDescriptionChange(event, index)}
             style={{ height: '70%' }}
           /&gt;
         &lt;/Table.Cell&gt;
       &lt;/Table.Row&gt;
  </code></pre>
  <p>All the input fields may have existing fields or may be empty and one can edit it them semd the edit fields to the API. How can I handle such a case with just 1 <code>handleFunction</code>. Is there a way? Any leads will be appreciated.</p>
  <p>In the above code, 2 input boxes are there with initial values from the api.</p>