How to build a nested object on handleChange with React?

Question

Good evening, I have a onChange function name handleChange for a number of dinamically created inputs. What this does is to receive the event and then it does as it follows:

const handleChange = (e) => {
  const updatedValues = [...values];
  updatedValues[e.target.dataset.id] = []
  updatedValues[e.target.dataset.id][e.target.name] = e.target.value;
  setValues(updatedValues);
}

The first issue i'm finding here is that is building the object with the following structure:

[
  {name: "some_name"}
], 
[
  {lastname: "some_lastname"}
], 
[
  {email: "some_data"}
], 
[
  {phone: "some_phone"}
]

But the structure I want goes like this:

[
  { name: "some_name", lastname: "some_lastname", email: "some_email", phone: "some_phone"}
]

Next thing I wanna do, is to store NESTED components on new property named nested. I want it to be like this:

[
  { name: "some_name", lastname: "some_lastname", email: "some_email", phone: "some_phone", nested: [
    { value: "some_value", value2: "some_value2", value3: "some_value3"}
  ]}
]

The nested ones are being grabbed from a box of inputs. The box has a className of "nested" and it is at the same level as the first inputs. Inside of it I have the inputs that I want to nest.

Could you please help me with this?

Drew Reese · Accepted Answer · 2020-08-01 20:10:53Z

Using an object map (i.e. an associative array of key-value pairs) you can write your handleChange callback as

const [values, setValues] = useState({}); // state is object

...

const handleChange = e => {
  const { dataset, name, value } = e.target;

  // Use a functional state update
  setValues(values => ({
    ...values,

    // update the correct dataset id
    [dataset.id]: {
      // shallow copy existing dataset values
      ...values[dataset.id],

      // if value is nested then update nested state value
      ...(dataset.nested
        ? {
            nested: {
              // shallow copy existing nested values
              ...values[dataset.id]?.nested,

              // update nested field value
              [name]: value
            }
          }
        : {
            // update unnested field value
            [name]: value
          })
    }
  }));
};

You may notice I added a nested value to the dataset. This is because it can be very difficult to track from the onChange event object up to the containing div with the classname "nested", i.e. there could be any number of elements between them, like <label> and other layout elements. Since you say your input fields are dynamically created it is very easy to simply add a data-nested="nested"|""} attribute.

<label>
  Name:
  <input
    data-id="test"
    data-nested=""
    name="name"
    type="text"
    onChange={handleChange}
  />
</label>

<div className="nested">
  <label>
    Nested Input 1
    <input
      data-id="test"
      data-nested="nested"
      name="value1"
      type="text"
      onChange={handleChange}
    />
  </label>
</div>

Collectives™ on Stack Overflow

How to build a nested object on handleChange with React?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related