Adding an element to an existing array in react hooks

Question

So I have this state variable:

const [Class, setClass] = useState({ Teacher: "John Fartsalot", Year: 2021, Students: [] });

and I have a:

ver studentObject

I want to push the studentObject into the Students array dynamically using setClass.

I came across this post: Push method in React Hooks (useState)? but it seems to be relevant only when there's just the list in there.

What is the correct way to do so in my case?

CertainPerformance · Accepted Answer · 2021-01-05 16:01:27Z

4

While you could spread the existing Class into a new object, and then spread the new students array into that new object as well, it would be better to follow the convention and separate out the state variables (as React recommends), and to not use Class as a variable name (it's very close to the reserved word class). Consider:

const [teacher, setTeacher] = useState('John Fartsalot');
const [year, setYear] = useState(2021);
const [students, setStudents] = useState([]);

Then to add to the students array, do

setStudents([...students, studentObject]);

Or, if students happens to be in a stale closure at this point, then

setStudents(students => [...students, studentObject]);

answered Jan 5, 2021 at 16:01

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

2 Comments

Mitch Tal Over a year ago

Thank you, this approach seems to work but unfortunately I may need to alter an existing student list later on from the database. Is there a way to insert it directly? I will change the name of the Class state either way. Something like this maybe? setClassData(ClassData => ({ ...ClassData, Students: some-code }))

CertainPerformance Over a year ago

You should really separate out the separate types of state into different state variables. If you get a new student list from the DB, just call setStudents with it. setStudents(studentsFromDB)

vvvvv · Accepted Answer · 2022-03-24 20:52:28Z

1

This is correct way to add:

setStudents(students => [...students, studentObject]);

edited Mar 24, 2022 at 20:52

vvvvv

32.9k19 gold badges70 silver badges103 bronze badges

answered Mar 24, 2022 at 20:51

Jay Singh

2063 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding an element to an existing array in react hooks

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related