I have a nested array of objects, each object have a nested options array like this.

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: []},
        
    ]})

Each of the items in the nested options array is supposed to be a value in a textInput which is editable. I want to be able to add/remove/edit these values inside the textInput with a button click. Please how will I be able to achieve this?

my code

 <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>

CodePudding user response：

// 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) )

CodePudding user response：

Add & remove implementation:

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
        }
    )
}