如何更新嵌套数据反应

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. Eg 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?

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

Answer 2

try this code

let student = {
        name: null,
        marks: { english: null },
    };
const [name, setName] = useState("");
const [marks, setMarks] = useState("");
const handleChange = (data,updatedValue) => {
    student = {
        ...student,
        [data]:updatedValue
    };
    if(data==="name")
      setName(updatedValue)
    else
      setMarks(updatedValue.english);
    console.log(student);
};

and use this JSX

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

Hope this will give you output in your console.

And You need to use state to pass value to the input.