change state variable (array of objects) in react

Question

I am very new to react and have a very straightforward usecase.

on a certain function call, I need to update one of the state variables - which is an array of objects.

I need to iterate through this array find an element and add a key the object in that element.

I tried this way but its not working.

const [finalStudents, setFinalStudents] = useState([]);

function setAttentionForStudent(deviceName, value) {
        // console.log("Device ID:", deviceName)
        // console.log("Attention value:", value)

        finalStudents.map((student, index) => {
             console.log("student", student)

            if (student['device']['deviceName'] == deviceName) {
                 console.log("student inside", student)
                setFinalStudents((prevFinalStudents) => {
                    console.log("prev final student",prevFinalStudents)

                    prevFinalStudents[index]['device']['attentionValue'] = value
                })

                // student['device']['attentionValue'] = value
            } else {
                setFinalStudents((prevFinalStudents) => {
                    prevFinalStudents[index]['device']['attentionValue'] = 0
                })
            }
        })
        // console.log(finalStudents)
    }

Check this: https://stackoverflow.com/a/55988040/6806340. Instead of fetching the object by index as is done in this link, you could compare for any object property. — Harris, Jul 10 '21 at 13:09

score 0 · Answer 1 · answered Jul 10 '21 at 13:21

Try this:

const [finalStudents, setFinalStudents] = [];

const setAttentionForStudent = (deviceName, value) => {
  if (finalStudents.length !== 0) {
    for (var x = 0; x < finalStudents.length; x++) {
      if (finalStudents[x].device.deviceName === deviceName) {
        finalStudents[x].device.deviceName = value;
        setFinalStudents(new Array(...finalStudents));
      } else {
        finalStudents[x].device.deviceName = value;
        setFinalStudents(new Array(...finalStudents));
      }
    }
  }
};

score 0 · Answer 2 · answered Jul 10 '21 at 13:24

0

callback in setFinalStudents should return an array to update state. You can use map in setFinalStudents like this:

setFinalStudents((prevFinalStudents) => {
  return prevFinalStudents.map((student) => {
    if (student["device"]["deviceName"] == deviceName) {
      student["device"]["attentionValue"] = value;
    } else {
      student["device"]["attentionValue"] = value;
    }
    return student;
  });
});

answered Jul 10 '21 at 13:24

Viet

12,133
2
15
21

Cannot change a state variable directly – Shekhar Jul 10 '21 at 17:19

score 0 · Answer 3 · answered Jul 10 '21 at 17:19

Was finally able to solve the problem by the following way:

 setFinalStudents((prevFinalStudents) => {
        const clonedFinalStudents = [...prevFinalStudents];
        return clonedFinalStudents.map((student) => {
            let updatedStudent = { ...student };
            let attentionValue = 0;
            if (student['device']['deviceName'] == deviceName) {
                attentionValue = value;
            }
            updatedStudent = {
                ...updatedStudent,
                device: {
                    ...updatedStudent.device,
                    attentionValue,
                },
            };
            return updatedStudent;
        });
    });

change state variable (array of objects) in react

3 Answers3