score:2

Issues

You aren't updating the nested state in the student array. You are generating a new root state key qty.

this.setState(prevState => ({
  qty : this.state.students[0].qty + 1
}))

Solution

Shallow copy the student array to create a new array reference, and shallow copy the element you want to update within the array. General note about updating nested state in react, you need to shallow copy any object you are updating since React uses shallow object equality to reconcile differences.

const IncrementHandler = item => {
  this.setState(prevState => ({
    students: prevState.students.map(student =>
      student.item === item
        ? {
            ...student,
            qty: student.qty + 1,
          }
        : student,
    ),
  }));
};

Note: You should probably also declare this callback outside the render function. It will still work defined there in the render method, but it goes against convention.


Related Query

More Query from same tag