React, update single value in state made of array of objects

Question

I am tring to update a single value in the state, this is my state:

state = {
    courses: [
      {
        id: 1,
        courseName: 'lenguage',
        courseType: false,
        courseHours: 10,
        courseGrade: ''
      },{
        id: 2,
        courseName: 'Math',
        courseType: true,
        courseHours: 20,
        courseGrade: ''
      },{
        id: 3,
        courseName: 'Biology',
        courseType: false,
        courseHours: 30,
        courseGrade: ''
      }
    ]
  };

I got the value I want to update and the index of the object inside the array but I cant find a way to update the value... This is what I have so far:

  updateCourseGrade(courseGrade, id){
        const index = this.state.courses.findIndex(course => (
          id === course.id
        ));



    const courses = [...this.state.courses];
    courses[index].courseGrade = courseGrade;
    this.setState({courses});
  }

as well I thought tried this block

const course = this.state.courses[index];
this.setState({
  courses: [...this.state.courses, course.courseGrade: courseGrade]
})

any help would be amazing tnx!

Subhendu Kundu · Accepted Answer · 2019-03-04 14:32:53Z

4

Ideally you should use this

this.setState((prevState) => {
// Use prevState and do the map just like someone suggested in one of the answer
 courses: prevState.map(course => course.id === id ? {...course, courseGrade } : course)
})

edited Mar 4, 2019 at 14:32

answered Mar 4, 2019 at 14:30

Subhendu Kundu

3,8766 gold badges29 silver badges60 bronze badges

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

1 Comment

Subhendu Kundu Over a year ago

There was an edit issue. On bus, answering from phone 🙈 hope you understand.

Rakha Kanz Kautsar · Accepted Answer · 2019-03-04 15:10:07Z

4

When you're working with React state, you're working with an immutable data structure Immutable.js can be a lifesaver.

But we can also do it without dependencies with map and object spread:

this.setState({
    courses: this.state.courses.map(course => course.id === id ? { ...course, courseGrade } : course)
})

edited Mar 4, 2019 at 15:10

answered Mar 4, 2019 at 14:25

Rakha Kanz Kautsar

773 bronze badges

5 Comments

Subhendu Kundu Over a year ago

You shouldn't use the state directly to map it either. Bad practice.

ZekeDroid Over a year ago

@SubhenduKundu it's actually correct to do it this way. The map function on an array creates a new array, therefore this is so far the only non-mutating solution, albeit a bit hard to follow for newer developers :)

Rakha Kanz Kautsar Over a year ago

@SubhenduKundu yup preferably you can also use the form of setState that receives a function instead of an update object, but I think it's only required for the rare occasion of possible race condition -- such as when toggling things

Robbie Milejczak Over a year ago

it's not "required" per se, but you are correct in that the biggest benefit of passing a function to set state is that your calls to setState will happen synchronously reactjs.org/docs/…

Subhendu Kundu Over a year ago

Yup you are right, however your might wanna look at codereview.stackexchange.com/questions/160411/… also there few articles on this why you shouldn't use the state.map directly. I will update you once I get a hold of my laptop.

Robbie Milejczak · Accepted Answer · 2019-03-04 14:40:21Z

Generally when working with state you want to perform only pure operations, because mutating state can lead to confusing, difficult to locate bugs.

updateCourseGrade = (courseGrade, id) => {
  const course = this.state.courses.find(course => course.id === id);
  if (course) {
    const updatedCourse = { ...course, courseGrade };
    const updatedCourses = this.state.courses
      .filter(course => course.id !== id)
      .concat(updatedCourse);
    this.setState({ courses: updatedCourses });
  }
}

This can get pretty cumbersome, but it is core to the philosophy of React itself. If you wanna make it easier on yourself, I recommend checking out immer, an NPM library that exports one function, produce. I don't normally recommend third party libraries as solutions, but I particularly love immer. It will look weird at first, but it works by using something called a Proxy (a new language feature in ES6):

updateCourseGrade = (courseGrade, id) => {
  this.setState((
    produce(draftState => {
      const index = draftState.courses.findIndex(course => (
        id === course.id
      ));
      draftState.courses[index].courseGrade = courseGrade;
    })
  ))
}

Often immer is not needed, but when working with arrays of objects and especially with nested object structures it can be a godsend in helping you write clean code that works well.

Edison Junior · Accepted Answer · 2019-03-04 14:30:07Z

0

you cant change const variables,

const courses = [...this.state.courses];
    courses[index].courseGrade = courseGrade;
    this.setState({courses});

if you have the value and the index of your data in array just do it

let state = {...this.state}

state.courses[INDEX].courseGrade = courseGrade;

this.setState({...state})

i hope it useful

edited Mar 4, 2019 at 14:30

answered Mar 4, 2019 at 14:22

Edison Junior

3201 silver badge7 bronze badges

3 Comments

Rajesh Dixit Over a year ago

Why would this work? Please explain what the issue was and why changing to this will work

ZekeDroid Over a year ago

Good start to the solution! But be careful that this is a mutating change and should be avoided if possible.

Robbie Milejczak Over a year ago

you definitely can change them, the only thing const prevents is reassignment. It's also worth nothing that the spread operation only shallow clones, so the courses array and each individual course are still passed by reference and being mutated here. It would be better to use this.state.slice()

Collectives™ on Stack Overflow

React, update single value in state made of array of objects

4 Answers 4

1 Comment

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related