How to update nested data react

Question

I am trying to build a form with some nested data update. The code is as below:

On Change method

let student = {
        name: null,
        marks: { english: null },
    };
const handleChange = (updatedValue) => {
    student = {
        ...student,
        ...updatedValue,
        marks: { ...updatedValue.marks },
    };
    console.log(student);
};

And my JSX:

<input
                            type="text"
                            className="form-control"
                            id="name"
                            placeholder="Name"
                            value={student.name ?? ""}
                            onChange={(event) =>
                                handleChange({
                                    name: event.target.value,
                                })
                            }
                        />
<input
                                type="text"
                                className="form-control"
                                id="english"
                                placeholder="English"
                                value={student.marks.english ?? ""}
                                onChange={(event) =>
                                    handleChange({
                                        marks: { english: event.target.value },
                                    })
                                }
                            />

The problem is that for "name" it works fine. But for "english", it behaves abnormally. E.g. when I enter "1" in English, it updates it to 1 in the console but on the UI, it immediately disappears from the input box. Also if I update it to 2, the value is replaced from one to 2.

The the expected value is 1

Can someone please help me identifying how to update the nested values correctly from the input box?

@sushildlh Just to make sure if there is nothing in student.name. "" will be taken — VIBHOR GOYAL
– VIBHOR GOYAL, Commented Aug 5, 2022 at 20:09
use | not ??. ALso are you updating state or doing direct manipulation on object? — sushildlh
– sushildlh, Commented Aug 5, 2022 at 20:10
@sushildlh Using | did not solved the problem. I am not updating state as of now. I am just trying to get the value and update it on console. — VIBHOR GOYAL
– VIBHOR GOYAL, Commented Aug 5, 2022 at 20:23

Mike · Accepted Answer · 2022-08-05 20:14:54Z

1

you must use state to store data

let student = {
    name: null,
    marks: { english: null },
};

change to

const [student, setStudent] = useState({
    name: null,
    marks: { english: null },
});

const handleChange = (updatedValue) => {
  setStudent(student => ({
    ...student,
    ...updatedValue,
    marks: { ...student.marks, ...updatedValue.marks },
  }))
};

answered Aug 5, 2022 at 20:14

Mike

8314 silver badges7 bronze badges

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

6 Comments

VIBHOR GOYAL Over a year ago

I am not trying to set state as of now. I am just trying to store the values in the student variable from input.

Mike Over a year ago

if you want to update ui you must use state

VIBHOR GOYAL Over a year ago

I am not trying to update UI. I am just trying to update the variable

Mike Over a year ago

it will fix issue with disappearing from input box, and save student as you expected

VIBHOR GOYAL Over a year ago

IT did not fixed the issue. Please check the sandbox code - codesandbox.io/s/cocky-worker-09ed1z?file=/src/App.js

|

Collectives™ on Stack Overflow

How to update nested data react

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related