How to update nested array and objects in react - reactjs

Question

I'm trying to update the state in react. However, still not clear how shall I do it. The nested structure is something like :
this.state ={
permissionsObject:{
fruitsGroup:[
{
index:0,
taste:false,
color:false,
},
{
index:1,
taste:false,
color:false,
},
],
fruitsGroup:[
{
index:0,
taste:false,
color:false,
},
{
index:1,
taste:false,
color:false,
},
]
}
}
Now, if I want to update the value of fruitsGroup -> taste based on the index value then how shall I proceed. I found there are various solutions exists for nested structure. However, none of them were answering my query or they are using react hooks while I'm not. Thanks well in advance.
Edit: The fruitGroup will have different name. So, how can I even locate it dynamically while setting the state.

Answer 1

You can do it like this:
import React, { Component } from "react";
export class App extends Component {
state = {
permissionsObject: {
fruitsGroup: [
{
index: 0,
taste: false,
color: false,
},
{
index: 1,
taste: false,
color: false,
},
],
groupName: [
{
index: 0,
taste: false,
color: false,
},
{
index: 1,
taste: false,
color: false,
},
],
},
};
updateStateHandler = (idx) => {
const updatedFruitsGroup = this.state.permissionsObject.fruitsGroup.map(
(item) => (item.index === idx ? { ...item, taste: true } : item)
);
const newState = {
permissionsObject: {
...this.state.permissionsObject,
fruitsGroup: updatedFruitsGroup,
},
};
this.setState(newState);
};
render() {
return (
<div>
{JSON.stringify(this.state)}
<button onClick={() => this.updateStateHandler(0)}>
Update index 0
</button>
<button onClick={() => this.updateStateHandler(1)}>
Update index 1
</button>
</div>
);
}
}
export default App;