Tengo una matriz anidada de objetos, cada objeto tiene una matriz de options anidadas como esta.
const [formFields, setFormFields ] = useState({ formTitle: '', fields: [ {name: 'country', val: '', type: 'radio', options: ['Japan', 'Korea', 'usa'] }, {name: 'state', val: '', type: 'select', options: ['texas', 'florida']}, {name: 'location', val: '', type: 'text', options: []}, ]}) Se supone que cada uno de los elementos en la matriz de options anidadas es un valor en un textInput que es editable. Quiero poder agregar/eliminar/editar estos valores dentro de la entrada de texto con un clic de botón. Por favor, ¿cómo podré lograr esto?
mi código
<Containter> {formFields.fields.map((field, index) => ( <View key={index}> <View> <TextInput onChangeText={(value ) => { onChange({name: field.name, value }); }} value={field.name} /> </View> {(field.type === 'select' || field.type === 'radio') && ( <> {field.options.map((option) => ( <TextInput value={option} onChangeText={(value ) => { onChange({name: field.options, ...field.options, value }); }} /> <Text onPress={removeOption}>X</Text> ))} <Button title="add option" /> </> ) } <IconButton icon="delete" onPress={handleRemoveField} /> </View> ))} <Button onPress={handleAddField} title="Add" /> </Containter>Agregar y quitar implementación:
onAdd (index,value) { const fields = formFields.fields.map((field,i) => { if (i==index) { const options = [...field.options,value] return {...field, options} } return field }) setFormFields( { ...formFields, fields } ) } onRemove (index,value) { const fields = formFields.fields.map((field,i) => { if (i==index) { const options = field.options.filter((item) => item != value) return {...field, options} } return field }) setFormFields( { ...formFields, fields } ) } // in constructor this.onChange = this.onChange.bind(this) // in class onChange (index,value) { this.setState(state => { const fields = state.fields.map((field,i) => { if (i==index) field.val = value return field }) return { ...state, fields } }) } // in component onChangeText( (e) => onChange(index, e.target.value) )Para cambio de valor:
onChange (index,value) { const fields = formFields.fields.map((field,i) => { if (i==index) field.val = value return field }) setFormFields({ ...formFields, fields }) } ... // somewhere in input element <TextInput ... onChangeText={(e) => onChange(index,e.target.value)} .. />