title: How to achieve multiple select in dynamic input form in react?
body: <blockquote>
  <p>Upload.js</p>
  </blockquote>
  <pre><code>import { v4 as uuidv4 } from 'uuid';
  import { Form, Container, Row, Col, Button } from 'react-bootstrap';
  const Upload = () =&gt; {
      const [inputFields, setInputFields] = useState([
          { id: uuidv4(), name: '', dialogueName: '', categories: [] },
      ]);
  const cats=[&quot;cricket&quot;,&quot;football&quot;,&quot;kabaddi&quot;]
      
      const handleSubmit = (e) =&gt; {
          e.preventDefault();
          console.log(&quot;InputFields&quot;, JSON.stringify(inputFields));
      };
      const handleChangeInput = (id, event) =&gt; {
          console.log(id, event.target.name, event.target.value)
          const newInputFields = inputFields.map(i =&gt; {
              if (id === i.id) {
                  if (event.target.name != 'categories') {
                      i[event.target.name] = event.target.value
                  }
                  else {
                      let difference = i['categories'].findIndex(x =&gt; x == event.target.value);
                      console.log(difference, event.target.value, i['categories'])
                      if (difference == -1) { i['categories'].push(event.target.value) }
                  }
              }
              return i;
          })
  
          setInputFields(newInputFields);
      }
      const handleAddFields = () =&gt; {
          setInputFields([...inputFields, { id: uuidv4(), name: '', dialogueName: '', categories: '' }])
      }
      const handleRemoveFields = id =&gt; {
          const values = [...inputFields];
          values.splice(values.findIndex(value =&gt; value.id === id), 1);
          setInputFields(values);
      }
      
      return (
          &lt;Container fluid&gt;
              &lt;h1&gt;Add New Content&lt;/h1&gt;
              &lt;&gt;
                  {inputFields.map(inputField =&gt; (
                      &lt;Container key={inputField.id}&gt;
                          &lt;Row&gt;
                              &lt;Col sm={12} md={6} lg={6}&gt;
                                  &lt;Form.Control
                                      name=&quot;name&quot;
                                      placeholder=&quot;Dialogue Name&quot;
                                      value={inputField.name}
                                      onChange={event =&gt; handleChangeInput(inputField.id, event)}
                                  /&gt;
                              &lt;/Col&gt;
                              &lt;Col sm={12} md={6} lg={6}&gt;
                                  &lt;Form.Control
                                      name=&quot;dialogueName&quot;
                                      placeholder=&quot;Dialogue or context Name&quot;
                                      value={inputField.dialogueName}
                                      onChange={event =&gt; handleChangeInput(inputField.id, event)}
                                  /&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                          &lt;Row&gt;
                              &lt;Col xs={6} sm={6} md={6} lg={6}&gt;
                                  &lt;Form.Select name=&quot;categories&quot; onChange={event =&gt; handleChangeInput(inputField.id, event)}  aria-label=&quot;Choose a category&quot; multiple &gt;
                                       &lt;option disabled selected={true} &gt;Choose a category&lt;/option&gt; 
                                      {(cats &amp;&amp; cats.length) &amp;&amp; cats.map((r, i) =&gt; {
                                          return (&lt;option key={i} value={r}&gt;{r}&lt;/option&gt;)
                                      })}
  
                                  &lt;/Form.Select&gt;
                              &lt;/Col&gt;
                              &lt;Col xs={6} sm={6} md={6} lg={6}&gt;
                                  &lt;Button className='m-1' variant=&quot;danger&quot; disabled={inputFields.length === 1} onClick={() =&gt; handleRemoveFields(inputField.id)}&gt;
                                      -
                                  &lt;/Button&gt;
                                  &lt;Button variant=&quot;primary&quot; className='m-1'
                                      onClick={handleAddFields}
                                  &gt;
                                      +
                                  &lt;/Button&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      &lt;/Container&gt;
                  ))}
                  &lt;Button
                      variant=&quot;info&quot;
                      onClick={handleSubmit}
                  &gt;Submit&lt;/Button&gt;
              &lt;/&gt;
          &lt;/Container &gt;
      );
  }
  
  export default Upload
  </code></pre>
  <p><em>Above code is a dynamic input form which contains multiple select. Rest of the input fields are working fine. But I'm not getting the logic of Multiple select. If I select any item, then it should push into the categories array. And if I unselect any item, then that item should be removed out of the array. Also the dynamic Input should work fin. Thank You</em></p>