如何根据react-native中的数组值生成动态UI

Question

I am trying to generate dynamic UI according to array value. formfiled is array were am getting below value. I have to generate dynamic ui according to below response. Now here at index 2 State of Origin is coming at 3 LGA of Origin . I have to reverse this. I mean rest anything should come as it. But I have to display "LGA of Origin" first and below after that "State of origin" . I can't give array index because it may change. Please help
// formfield array value is below

 formfiled
    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:
    key: "lgaOfOrigin"
    label: "LGA of Origin"
    model: "model.lgaOfOrigin"
    name: "lgaOfOrigin"
    placeHolder: "Enter Lga of origin"
    position: "4"
    required: "true"
    type: "childSelect"
    __typename: "FormFields"


    <View style={styles.container}>
                {formFields.map((document, index) => {
                  return (
                      <View style={{flexDirection: 'column', backgroundColor: '#fff', padding: 15}}
                      key={index}>
                          {document.type==='text' && (
                          <View style={{  }}>
                            <View style={{ flexDirection: 'row', backgroundColor: '#fff'}}>
                                  <SmallText textColor="grey" text={document.label} />
                                    </View>
                               <Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
                                   <Input
                                     value={lastName}
                                      keyboardType='default'
                                       onChangeText={(lastName) =>
                                        this.setState({ lastName: lastName.replace(/\s/g, '') })}
                                                />
                                            </Item>
                                        </View>
                            )
                        }

                          {document.type === 'parentSelect' && (
                            <View  style={{flexDirection:'row'}}>
                              <SelectField options={stateOptions} value={statesValue}
                              onChange={this.selectedDocument} that={this} 
                              label={document.label}/>
                            </View>

                          )}

                       {document.type === 'childSelect' && (
                          <View style={{  }}>
                            <View style={{ flexDirection: 'row', backgroundColor: '#fff'}}>
                                  <SmallText textColor="grey" text={document.label} />
                                    </View>
                               <Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
                                   <Input
                                     value={lgaValue}
                                      keyboardType='default'
                                       onChangeText={(lgaValue) =>
                                        this.setState({ lgaValue: lgaValue.replace(/\s/g, '') })}
                                                />
                                            </Item>
                                        </View>
                            )
                        }

                          {document.type ==='date' && (
                               <View >
                               <View style={{
                                   flexDirection: 'row', backgroundColor: '#fff'
                               }}>
                                   <SmallText textColor="grey" text={document.label} />
                               </View>
                               <Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
                                   <DatePicker
                                       minDate={minDate}
                                       maxDate={currentDate}
                                       currentDate={dateOfBirth}
                                       format={format}
                                       width={deviceWidth}
                                       onChange={(dateOfBirth) => this.onChange(dateOfBirth)}
                                       marginLeft={0}
                                   />
                               </Item>
                           </View>
                          )}

                        </View>
                  );
                }
                )}

                  </View>

Answer 1

You can map this array to render your UI or use flatlist and pass this data as datasource to get dynamic UI