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: "[email protected]",
  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. However, watch out for prototype pollution vulnerabilities when using things like these! — FZs
– FZs, Commented Feb 13, 2021 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? — possum
– possum, Commented Feb 13, 2021 at 10:08

prathamesh yerva · Accepted Answer · 2021-02-13 09:50:27Z

0

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

}

edited Feb 13, 2021 at 9:50

answered Feb 12, 2021 at 19:55

prathamesh yerva

113 bronze badges

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

Comments

Nivethan · Accepted Answer · 2022-05-02 14:16:10Z

0

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

answered May 2, 2022 at 14:16

Nivethan

3,7871 gold badge27 silver badges27 bronze badges

Collectives™ on Stack Overflow

Storing React form data in a nested object with useState

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related