Я пытаюсь сгенерировать динамический интерфейс в соответствии со значением массива. Formfiled это массив, где я получаю ниже значения. Я должен генерировать динамический интерфейс в соответствии с ответом ниже. Теперь здесь в индекс 2 State of Origin идет в 3 LGA of Origin. Я должен полностью изменить это. Я имею в виду, что все остальное должно прийти как это. Но сначала я должен отобразить "LGA of Origin", а после этого "State of origin". Я не могу дать индекс массива, потому что он может измениться. Пожалуйста, помогите
// значение массива поля формы ниже
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>