title: Reactjs How to insert/update array of select?
body: <p>I'm working with Reactjs typescript and now I'm stuck in an assignment, I'm coding a new section to add shipper documents (necessary to set up a new shipper) and the goal is allow to application user add every select as him needs. The point is a document has a document name and a boolean validation if photo is required, so How can I add for example 3 selects and then insert on database? same way if a shipper has 3 or 4 documents and the user needs to modify. Do you have any idea?</p>
  <p>Section code:</p>
  <pre><code>interface managementDatProps {
      isManagementService: boolean;
      setIsManagementService: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;;
      requestDocumentsSelect: DocumentToManage[];
      inputChangeHandler: (eventName: string, newValue: any) =&gt; void;
      shipperRequestDocumentsDatabase: RequestDocuments[] | null;
      shipperRequestDocumentsSelected: ManagementDocuments | null;
      setShipperRequestDocumentsSelected: React.Dispatch&lt;React.SetStateAction&lt;RequestDocuments | null&gt;&gt;;
      enablePhoto: boolean;
      setEnablePhoto: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;;
  }
  
  const ManagementData: React.FC&lt;managementDatProps&gt; = (props) =&gt; {
      const [newRequestDocumentSection, setNewRequestDocumentSection] = useState&lt;number&gt;(0);
  
      const handleNewRequestDocumentSection = () =&gt; {
          setNewRequestDocumentSection(newRequestDocumentSection + 1);
      }
  
      useEffect(() =&gt; {
          if (!!props.shipperRequestDocumentsDatabase &amp;&amp; props.shipperRequestDocumentsDatabase.length === 0) {
              setNewRequestDocumentSection(newRequestDocumentSection + 1);
          }
      }, []);
  
      return (
          // not too much complicated validation
        &lt;div className=&quot;form-item-cashOnDelivery&quot;&gt;
            &lt;IonList&gt;
                &lt;IonRow&gt;
                    &lt;IonCol size=&quot;6&quot;&gt;
                        &lt;IonItem className=&quot;form-item&quot;&gt;
                            &lt;IonLabel color=&quot;primary&quot; position={'stacked'}&gt;
                                is Management Serice?
                            &lt;/IonLabel&gt;
                            &lt;IonRadioGroup className=&quot;reduced&quot;
                                           value={props.isManagementService}
                                           onIonChange={(e) =&gt; props.setIsManagementService(e.detail.value)}
                            &gt;
                                &lt;IonRow&gt;
                                    &lt;IonCol&gt;
                                        &lt;IonItem&gt;
                                            &lt;IonLabel&gt;Sí&amp;nbsp;&lt;/IonLabel&gt;
                                            &lt;IonRadio value={true}/&gt;
                                        &lt;/IonItem&gt;
                                    &lt;/IonCol&gt;
                                    &lt;IonCol&gt;
                                        &lt;IonItem&gt;
                                            &lt;IonLabel&gt;No&amp;nbsp;&lt;/IonLabel&gt;
                                            &lt;IonRadio value={false}/&gt;
                                        &lt;/IonItem&gt;
                                    &lt;/IonCol&gt;
                                &lt;/IonRow&gt;
                            &lt;/IonRadioGroup&gt;
                        &lt;/IonItem&gt;
                    &lt;/IonCol&gt;
                &lt;/IonRow&gt;
  
                {/*If a shipper has a management service show section on tab*/}
                {props.isManagementService &amp;&amp;
                    &lt;IonRow&gt;
                        &lt; IonCol size=&quot;12&quot;&gt;
                            &lt;IonTitle&gt;Request Documents&lt;/IonTitle&gt;
                        &lt;/IonCol&gt;
                    &lt;/IonRow&gt;
                }
  
                
                {/*If a shipper has documents saved on database*/}
                {props.isManagementService &amp;&amp; !!props.shipperRequestDocumentsDatabase &amp;&amp; props.shipperRequestDocumentsDatabase.length &gt;= 1 &amp;&amp; props.shipperRequestDocumentsDatabase.map((document, i) =&gt; (
                    &lt;IonRow&gt;
                        &lt;IonCol size=&quot;6&quot;&gt;
                            &lt;IonItem className=&quot;form-item autocomplete&quot;&gt;
                                &lt;IonLabel color=&quot;primary&quot; position=&quot;stacked&quot;&gt;
                                    Request Document *
                                &lt;/IonLabel&gt;
                                &lt;GalaxyAutocomplete
                                    onChange={(event: any, newValue: RequestDocuments | null) =&gt; {
                                        props.setShipperRequestDocumentsSelected(newValue ? newValue : null);
                                    }}
                                    value={document || ''}
                                    id=&quot;managementDocument&quot;
                                    options={props.requestDocumentsSelect}
                                    getOptionSelected={(option, value) =&gt;
                                        option.name === value.name
                                    }
                                    getOptionLabel={(option) =&gt; option.name || ''}
                                    renderInput={(params) =&gt; (
                                        &lt;TextField
                                            {...params}
                                            variant=&quot;standard&quot;
                                            placeholder={props.shipperRequestDocumentsSelected ? props.shipperRequestDocumentsSelected.name : ''}
                                        /&gt;
                                    )}
                                /&gt;
                            &lt;/IonItem&gt;
                        &lt;/IonCol&gt;
                        &lt;IonCol size=&quot;6&quot;&gt;
                            &lt;IonItem&gt;
                                &lt;IonLabel color=&quot;primary&quot; position=&quot;stacked&quot;&gt;
                                    Enable Photo
                                &lt;/IonLabel&gt;
                                &lt;IonToggle checked={document.enablePhoto} onIonChange={(e) =&gt;
                                    props.setEnablePhoto(!props.enablePhoto)
                                }/&gt;
                            &lt;/IonItem&gt;
                        &lt;/IonCol&gt;
                    &lt;/IonRow&gt;
                ))
                }
  
                {/*If an user click on &quot;add a new document button&quot;*/}
                {props.isManagementService &amp;&amp;
                    Array.apply(0, Array(newRequestDocumentSection)).map(function (x, i) {
                        return (
                            &lt;IonRow&gt;
                                &lt;IonCol size=&quot;6&quot;&gt;
                                    &lt;IonItem className=&quot;form-item autocomplete&quot;&gt;
                                        &lt;IonLabel color=&quot;primary&quot; position=&quot;stacked&quot;&gt;
                                            Request Document *
                                        &lt;/IonLabel&gt;
                                        &lt;GalaxyAutocomplete
                                            onChange={(event: any, newValue: RequestDocuments | null) =&gt; {
                                                props.setShipperRequestDocumentsSelected(newValue ? newValue : null);
                                            }}
                                            value={document || ''}
                                            id=&quot;managementDocument&quot;
                                            options={props.requestDocumentsSelect}
                                            getOptionSelected={(option, value) =&gt;
                                                option.name === value.name
                                            }
                                            getOptionLabel={(option) =&gt; option.name || ''}
                                            renderInput={(params) =&gt; (
                                                &lt;TextField
                                                    {...params}
                                                    variant=&quot;standard&quot;
                                                    placeholder={props.shipperRequestDocumentsSelected ? props.shipperRequestDocumentsSelected.name : ''}
                                                /&gt;
                                            )}
                                        /&gt;
                                    &lt;/IonItem&gt;
                                &lt;/IonCol&gt;
                                &lt;IonCol size=&quot;6&quot;&gt;
                                    &lt;IonItem&gt;
                                        &lt;IonLabel color=&quot;primary&quot; position=&quot;stacked&quot;&gt;
                                            Enable Photo
                                        &lt;/IonLabel&gt;
                                        &lt;IonToggle checked={props.enablePhoto} onIonChange={(e) =&gt;
                                            props.setEnablePhoto(!props.enablePhoto)
                                        }/&gt;
                                    &lt;/IonItem&gt;
                                &lt;/IonCol&gt;
                            &lt;/IonRow&gt;
                        )
                    })
                }
  
                {/* Simple button to add a new select */}
                {props.isManagementService &amp;&amp;
                &lt;IonTitle onClick={() =&gt; handleNewRequestDocumentSection()}&gt;Add a new request document&lt;/IonTitle&gt;
                }
            &lt;/IonList&gt;
        &lt;/div&gt;
      )
  }
  
  export default ManagementData;
  </code></pre>
  <p>Section capture:</p>
  <p><a href="https://i.stack.imgur.com/qCgtC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCgtC.png" alt="enter image description here" /></a></p>
  <p>Section database records:</p>
  <p><a href="https://i.stack.imgur.com/fs58F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fs58F.png" alt="enter image description here" /></a></p>
  <p>If I click on &quot;add new document&quot; button to show some selects and I select a option for the second select automatically the same value change to the follows selects.
  <a href="https://i.stack.imgur.com/LWbKc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LWbKc.png" alt="enter image description here" /></a></p>