title: How to upload data to server from dynamic UI in react native
body: <p>Here in this code I am getting some array value, which is dynamic. On basis of that value I am generating UI. This value may change so according to that UI will change.</p>
  
  <p>Now I have to upload all data on button click to server, I am getting confused. </p>
  
  <p>Like if we have 3 fields static, I can create 3 states and by using that I can pass that value to the API.</p>
  
  <p>But here as I am generating dynamic UI how can I take value and upload.</p>
  
  <p>Below is the array value on basis of that I am generating dynamic form.</p>
  
  <pre><code>     formFields: Array(8)
          0:
          key: "dateOfBirth"
          label: "Date of Birth"
          model: "model.dateOfBirth"
          name: "dateOfBirth"
          placeHolder: "DD/MM/YYYY"
          position: "1"
          required: "true"
          type: "date"
          __typename: "FormFields"
          __proto__: Object
          1:
          key: "lastRechargedAmount"
          label: "Last RCC Amt."
          model: "model.lastRechargedAmount"
          name: "lastRechargedAmount"
          placeHolder: "Amount in Naira"
          position: "2"
          required: "false"
          type: "text"
          __typename: "FormFields"
          __proto__: Object
          2:
          key: "stateOfOrigin"
          label: "State of Origin"
          model: "model.stateOfOrigin"
          name: "stateOfOrigin"
          placeHolder: "State of origin"
          position: "3"
          required: "true"
          type: "parentSelect"
          __typename: "FormFields"
          __proto__: Object
          3: {type: "childSelect", model: "model.lgaOfOrigin", label: "LGA of Origin", placeHolder: "Enter Lga of origin", key: "lgaOfOrigin", …}
          4:
          key: "frequentlyDialledNumbers1"
          label: "Freq.Dialled No"
          model: "model.frequentlyDialledNumbers"
          name: "frequentlyDialledNumbers1"
          placeHolder: "frequently dialled MSISDN"
          position: "5"
          required: "true"
          type: "text"
          __typename: "FormFields"
          __proto__: Object
          5: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers2", …}
          6: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers3", …}
          7: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers4", …}
          length: 8
  </code></pre>
  
  <p>The code below I am using to generate UI and on button press I am calling function validatUser(). On button press I have to take all values and send in this function.</p>
  
  <pre><code>    class CustomerEvalidation extends Component {
        constructor(props) {
          super(props);
          const { eValidationMasterData } = this.props;
          this.state = {
            selectedRow: -1,
            disableBtn: true,
            showSimSwapReason: false,
            dateOfBirth: currentDate,
            lastName: '',
            lgaValue: eValidationMasterData.masterData.lga[0].code,
            stateValue: eValidationMasterData.masterData.lga[0].state.name,
            stateCode: eValidationMasterData.masterData.lga[0].state.code,
            isModalVisible:false
          };
        }
  
        componentWillUnmount() {
          this.setState({
            showSimSwapReason: false
          });
        }
  
        lgaChanged = (key, val) =&gt; {
          this.handleChangeLga({ field: "lgaValue" }, val);
        };
  
        handleChangeLga = (props, e) =&gt; {
          const { lga } = this.props.eValidationMasterData.masterData;
          let tempObj = this.state.lgaValue;
          for (let i = 0; lga[i]; i++) {
            if (lga[i].code == e) {
              const stateData = lga[i].state;
              this.setState({
                stateValue: stateData.name,
                stateCode: stateData.code
              })
            }
          }
          tempObj[props.field] = e;
          this.setState({ lgaValue: e });
        };
  
        validatUser = () =&gt; {
          const {dateOfBirth,lgaValue,stateCode}=this.state;
          const validateUser = {
            dateOfBirth: dateOfBirth,
            lgaValue:lgaValue,
            stateCode:stateCode
  
          }
          this.props.verifySecurityQuestions(validateUser);
        }
        onChangeExp = (e) =&gt; {
          this.setState({
            dateOfBirth: e
          })
      }
        render() {
          const { dateOfBirth, lastName, lgaValue, stateValue } = this.state;
          const { isCamera, loading, error, securityQuestions, eValidationMasterData,validateUser } = this.props;
          const { formFields } = securityQuestions.evalidatorType[0].SelectionList[0];
          const { lga } = eValidationMasterData.masterData;
          let lgaOptions = [];
          lga.map(({ code: value, name: label }) =&gt; {
            lgaOptions.push({ value, label });
          });
  
          return (
            &lt;View style={{minHeight: deviceHeight, color:'#fff'}}&gt;
              {loading &amp;&amp;
                &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
                  &lt;OverlaySpinner color="#00678F" /&gt;
                &lt;/View&gt;}
              {!isCamera &amp;&amp; (
                &lt;View style={styles.container}&gt;
                  {formFields.map((document, index) =&gt; {
                    return (
                      &lt;View style={{backgroundColor: '#fff' }}
                        key={index}&gt;
                        {document.type === 'text' &amp;&amp; (
                          &lt;View style={{ padding: 15}} &gt;
                            &lt;View style={{ flexDirection: 'row', backgroundColor: '#fff' }}&gt;
                              &lt;SmallText textColor="grey" text={document.label} /&gt;
                            &lt;/View&gt;
                            &lt;Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}&gt;
                              &lt;Input
                                value={lastName}
                                keyboardType='default'
                                onChangeText={(lastName) =&gt;
                                  this.setState({ lastName: lastName.replace(/\s/g, '') })}
                              /&gt;
                            &lt;/Item&gt;
                          &lt;/View&gt;
                        )
                        }
  
                        {document.type === 'date' &amp;&amp; (
                          &lt;View  style={{ padding: 15}}&gt;
                            &lt;View style={{
                              flexDirection: 'row', backgroundColor: '#fff'
                            }}&gt;
                              &lt;SmallText textColor="grey" text={document.label} /&gt;
                            &lt;/View&gt;
                            &lt;Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}&gt;
                              &lt;DatePicker
                                minDate={minDate}
                                maxDate={currentDate}
                                currentDate={dateOfBirth}
                                format={format}
                                width={deviceWidth}
                                onChange={(dateOfBirth) =&gt; this.onChangeExp(dateOfBirth)}
                                marginLeft={0}
                              /&gt;
                            &lt;/Item&gt;
                          &lt;/View&gt;
                        )}
  
                      &lt;/View&gt;
                    );
                  }
                  )}
  
                &lt;/View&gt;
              )}
              &lt;View style={{ flexDirection: 'column', padding: 15 }}&gt;
                &lt;View style={{ flexDirection: 'column', flex:1 }}&gt;
                  &lt;SelectField options={lgaOptions} value={lgaValue}
                    onChange={this.lgaChanged} that={this}
                    label={"LGA of Origin"} /&gt;
                &lt;/View&gt;
  
  
                &lt;View style={{ flexDirection: 'column' }}&gt;
                  &lt;View style={{ flexDirection: 'row', backgroundColor: '#fff' }}&gt;
                    &lt;SmallText textColor="grey" text={"State of Origin"} /&gt;
                  &lt;/View&gt;
                  &lt;Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}&gt;
                    &lt;Input
                      value={stateValue}
                      keyboardType='default'
                      onChangeText={(stateValue) =&gt;
                        this.setState({ stateValue: stateValue.replace(/\s/g, '') })}
                    /&gt;
                  &lt;/Item&gt;
                &lt;/View&gt;
  
                &lt;View style={{ paddingBottom: 15, marginTop: 20 }}&gt;
                  &lt;PrimaryBtn label={'Validate User'} disabled={false}
                    onPress={() =&gt; this.validatUser()} /&gt;
                &lt;/View&gt;
              &lt;/View&gt;
  
  
            &lt;/View&gt;
          );
        }
      }
  
      export default CustomerEvalidation;
  </code></pre>