Question: I want to increment the object inside the array students of array subjects. And the state is as given below :

```
  state = {
   students: [{
    name: "",
    address: "",
    class: "",
    subjects: [{ subjectName: "", duration: "" }],
  },
 ],
};

```

I write the Handle increment for subjects as below:

```
handleIncrement() {
this.state.students.map((student) => {
  this.setState({
    student: [...student.subjects, { subjectName: "", duration: "" }],
  });
});
console.log(this.state);
}

```

Button On Click to Increment as below:

```
<button
  type="button"
  className="btn btn-primary"
  style={myStyle.btnCircle}
  onClick={this.handleIncrement}>
      <i className="fa fa-plus"></i>
   </button>

```

Problem is I cannot increment the Object inside the subjects array. Please Can anyone help me to solve my problem on the above state format...Please do not suggest me to change my state, Data format. I'm using React js..

Answer: 
```
handleIncrement() {
   const newSubject = { subjectName: "", duration: "" }
   const newStudents = this.state.students.map((student) => 
                    { ... student, subjects: student.subjects.concat(newSubject) })
   this.setState({ students: newStudents })
}

```
I guess what you mean by increment is you want to push object(e.g { subjectName: "2", duration: "2" }) into **subjects** array

It is not good to call setState() in map() function. You need to create new state without mutating previous and assign it at once

```
let newStudents = state.students.slice(0)
newStudents = newStudents.map(student => {
  student.subjects = [...student.subjects, { subjectName: "2", duration: "2" }]
  return student
})

```

Now you have desired students state in *newStudents* and can call *setState()*

```
this.setState({students: newStudents})

```