Storing React form data in a nested object with useState

Question

I'm building out a form with React, and I want to store the form fields in an object with nested data like this:

{
  name: "Test User",
  email: "test@example.com.com",
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY"
  }
}

The nested address is what I'm having trouble with.

My code looks like this:

const [booking, setBooking] = React.useState({ address: {} });

  const handleChange = e => {
    const { name, value } = e.target;
    setBooking(prevState => ({
        ...prevState,
        [name]: value
    }));
  };

return (
  <form onSubmit={handleSubmit}>
    <label>Name</label><input type="text" name="name" value={booking.name} onChange={handleChange} />
    <label>Email</label><input type="text" name="email" value={booking.email} onChange={handleChange} />
    <label>Street Address</label><input type="text" name="address.street" value={booking.address.street} onChange={handleChange} />
    <label>City</label><input type="text" name="address.city" value={booking.address.city} onChange={handleChange} />
    <label>State</label><input type="text" name="address.state" value={booking.address.state} onChange={handleChange} />
    <button type="submit">Create booking</button><br /><br />
  </form>
)

But with this approach, the address values are not being nested. For example, for the street address field, the booking ends up with a key of address.street rather than using the nested address object.

How can I get the form data to be stored in a nested object?

This question answers your question: [Accessing nested JavaScript objects and arrays by string path](https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path). However, watch out for prototype pollution vulnerabilities when using things like these! — FZs, Feb 13 '21 at 10:00
Does this answer your question? [How to create a nested object (JSON) of a form input values based on the input name in vanilla JavaScript?](https://stackoverflow.com/questions/44916365/how-to-create-a-nested-object-json-of-a-form-input-values-based-on-the-input-n) — possum, Feb 13 '21 at 10:08

prathamesh yerva · Answer 1 · 2021-02-13T09:50:27.237

you need to create two onchange events function one for booking and another for address

  const [booking, setBooking] = React.useState([]);
  const [addressDetails, setAddressDetails] = useState([])

  function handleChange(e) {
    setBooking(prevState => ({
      ...prevState,
    
      ...prevState.raw,
      [e.target.name]: e.target.value,}
    ))
  }

function handleChangeAddress(e) {

  setAddressDetails(prevState => ({
  ...prevState,
  Address: {
    ...prevState.Address,
    [e.target.name]: e.target.value,
  },
}))

  setBooking(prevState => ({
  ...prevState,
  ...prevState.store,
  Address:addressDetails.Address
  
}))

}

score 0 · Answer 2 · answered May 02 '22 at 14:16

For the address you can create a separate handler function, i'm using typescript to explain but you can do the same in Javascript too( just remove types of e from function parameter)

const onAddressHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  setBooking({
    ...booking, 
    address:{
    ...booking.address,
    [e.target.name]: e.target.value
  },
  });
};

Storing React form data in a nested object with useState

2 Answers2