Changing an array inside an object using React Hooks

Question

I have a form that looks like,

const virtual_form = {
    name: 'virtual',
    address_info: [
        {
            name: 'a',
            address: '',
        }
    ]
}

I use this as a default state of my hook

const [virtualForm, setVirtualForm] = useState(virtual_form)

I just providing the user to modify the address field.

<div className="input-text-wrapper">
    <TextField
        value={virtualForm.address_info.address}
        name="address"
        onChange={(e) => handleAccessInfoChange(e, 'virtual')} />
</div>

like above.

However, in my handleAccessInfoChange,

const handleAccessInfoChange = (e, type) => {
    console.log(e.target.name, e.target.value, type)
    switch (type) {
        case 'virtual':
            setVirtualForm({...virtualForm, address_info[0]: [...virtualForm.address_info, address: value] })
    }
}

I am getting a syntax error when I try to change the virtualForm. It says 'address' is not defined no-undef.

How can I make this to only affect the address correctly?

Is there a reason you have the object with name and address in an array? The array seems unnecessary — Brian Thompson
– Brian Thompson, Commented Jan 24, 2020 at 20:45
Because the users should be able to put multiple address_infos in the future — Dawn17
– Dawn17, Commented Jan 24, 2020 at 20:47

Brian Thompson · Accepted Answer · 2020-01-24 20:50:04Z

2

You're treating the object with address and name as an array, but you cant assign an array with this syntax [address: value]. Its looking for a variable called address not using it as a key.

Instead, map over it and modify the object at the correct index. I have no way to know which index, so I'll assume 0 as in the question:

setVirtualForm({
  ...virtualForm, 
  address_info: virtualForm.address_info.map((info, i) => {
    if (i == 0) {
      return {
        ...info,
        address: value
      }
    }
    return info
  }
})

answered Jan 24, 2020 at 20:50

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing an array inside an object using React Hooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related