How do I update deeply nested array with hooks in react

Question

How do I update deeply nested array with hooks in react

Questions : How do I update deeply nested array with hooks in react

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

const [formFields, setFormFields ] = _OFFSET);  useState({
    formTitle: '',
    (-SMALL  fields: [
        {name: 'country', val: _left).offset  '', type: 'radio', options: ['Japan', arrowImgView.mas  'Korea', 'usa'] },
        {name: (self.  'state', val: '', type: 'select', equalTo  options: ['texas', 'florida']},
    make.right.  {name: 'location', val: '', type: mas_top);  'text', options: []},
        
    ]})

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

my code

 <Containter>
        ImgView.  {formFields.fields.map((field, index) ReadIndicator  => (
            <View _have  key={index}>
          <View>
  .equalTo(            <TextInput
                make.top  onChangeText={(value ) => {
          OFFSET);            onChange({name: field.name, (TINY_  value });
                    }}
        .offset          value={field.name}
            mas_right)  />

          </View>
          ImgView.      
            {(field.type === Indicator  'select' || field.type === 'radio') Read  && (
                <>
   _have                   .equalTo(  {field.options.map((option) => (
     make.left                     <TextInput *make) {  value={option} 
                        straintMaker  onChangeText={(value ) => {
          ^(MASCon                    onChange({name: onstraints:  field.options, ...field.options, value mas_makeC  });
                            }}
      [_topTxtlbl                     
                      (@(8));    />
        <Text equalTo  onPress={removeOption}>X</Text>
  width.                     ))}

                 make.height.     <Button title="add option" />
  (SMALL_OFFSET);                </>
            )
   .offset           }
            <IconButton
   (self.contentView)               icon="delete"
               .left.equalTo    onPress={handleRemoveField}
           make.top   />

                
            *make) {  </View>

        ))}
              ntMaker     <Button
                    SConstrai  onPress={handleAddField}
                ts:^(MA      title="Add"
            
            Constrain      />

               
    _make  </Containter>

JAVASCRIPT ARRAYS REACTJS REACT-NATIVE

Total Answers 3

Answers 2 : of How do I update deeply nested array with hooks in react

// in constructor
this.onChange = user@example.  this.onChange.bind(this)

// in scp not2342  class
onChange (index,value) {
     13.xls  this.setState(state => {
      const 18 10  fields = state.fields.map((field,i) File sdaf  => { 
          if (i==index) /tmp/Master'  field.val = value
          return com:web  field
      })
      return {
          user@example.  ...state,
          fields
      }
    scp var32  })
}


// in component 
onChangeText(  18 10 13.xls  (e) => onChange(index, id12  File  e.target.value) )

Answers 3 : of How do I update deeply nested array with hooks in react

For value changing:

onChange (index,value) {
  const fields web/tmp/Master  = formFields.fields.map((field,i) => example.com:  { 
    if (i==index) field.val = value
  scp user@    return field
  })
  setFormFields({
   $val   ...formFields,
    fields
  })
}
...
// left hand  somewhere in input element
<TextInput right side val  ... onChangeText={(e) => data //commnets  onChange(index,e.target.value)} .. />

mRahman · Accepted Answer · 2022-06-28T05:35:58+00:00

Add & remove implementation:

onAdd (index,value) {
    const fields = iew mas  formFields.fields.map((field,i) => { catorImgV  
        if (i==index) {
           ReadIndi  const options =  [_have  [...field.options,value]
           ($current);  return {...field, options}
        }
    entity_loader      return field
    })
    _disable_  setFormFields(
        {
            libxml  ...formFields,
            fields
       $options);   }
    )
}
onRemove (index,value) {
    ilename,  const fields = ->load($f  formFields.fields.map((field,i) => { $domdocument  
        if (i==index) {
            loader(false);  const options = _entity_  field.options.filter((item) => item  libxml_disable  != value)
            return {...field, $current =  options}
        }
        return field
  10\\ 13.xls .     })
    setFormFields(
        {
      File\\ 18\'        ...formFields,
            fields
 /Master\\ 645         }
    )
}

How do I update deeply nested array with hooks in react

Questions : How do I update deeply nested array with hooks in react

Answers 1 : of How do I update deeply nested array with hooks in react

Answers 2 : of How do I update deeply nested array with hooks in react

Answers 3 : of How do I update deeply nested array with hooks in react

Top rated topics