How do I setState of a deeply nested property in React? - reactjs

Question

I'm trying to increment the tally property of a given habit, in this context I'm targeting tally: 4. On a related note, I'm open to suggestions for better ways of structuring my data.
class App extends Component {
constructor(props){
super(props)
this.state = {
displayedHabit: "Exercise",
currentUser: "Achilles",
userList: [
{
user: "Achilles",
id: 0,
habits: [
{
habit: "Exercise",
tally: 123
},
{
habit: "Eat Vegetables",
tally: 4
},
]
}
]
}
}
Here is the implementation I've tried after searching for solutions. I don't believe it's working because assignments that use .find() that work after mounting are broken after I call the increment function through an event handler - leading me to believe .find() is no longer being called on an array.
increment = () => {
let newCount = this.state.userList[0].habits[1].tally + 1
this.setState({
userList: {
...this.state.userList[0].habits[1],
tally: newCount
}
})
}

Answer 1

In React, it's very important that you don't mutate your data structures. This essentially means that you have to copy the data structure at each level of your nested data. Since this is too much work, I suggest you use a library made for this purpose. I personally use object-path-immutable.
Example:
import {set} from 'object-path-immutable';
increment = ({userIndex, habitIndex}) => this.setState({
userList: set(this.state.userList, [userIndex, 'habits', habitIndex, 'tally'], this.state.userList[userIndex].habits[habitIndex].tally + 1)
});

Answer 2

I would recommend restructuring your data such that you have objects which actually map the data in accessible ways ie:
this.state = {
displayedHabit: "Exercise",
currentUser: "Achilles",
userList: {
"Achilles": { // Could also be id
id: 0,
habits: {
"Exercise": 123,
"EatVegetables": 4
}
}
}
}
This would allow you to do something like
increment = () => {
const {userList} = this.state;
this.setState({
userList: {
...userList,
Achilles: {
...userList.Achilles
habits: {
...userlist.Achilles.habits
'EatVegetables': userlist.Achilles.habits.EatVegetables + 1
}
}
}
})
}
This would be further simplified by using object-path-immutable which would allow you to do something simple like:
increment = () => {
const {userList} = this.state;
this.setState({
userList: immutable.set(userList, 'Achilles.id.habits.Exercise', userList.Achilles.id.habits.Exercise + 1)
})
}
In order to make this more generic though I would recommend doing what something similar to what earthling suggested:
import {set} from 'object-path-immutable';
incrementUserHabit = ({userIndex, habitIndex}) => this.setState({
userList: set(this.state.userList, [userIndex, 'habits', habitIndex, 'tally'], this.state.userList[userIndex].habits[habitIndex].tally + 1)
});
This way your code is more reusable

Answer 3

Something like this?
class App extends React.Component {
constructor() {
super();
this.state = {
userList: {
'12': {
name: 'Achilles',
habits: {
Exercise: {
tally: 123
},
'Eat Vegetables': {
tally: 231
}
}
}
}
}
}
inc() {
const {userList} = this.state;
userList['12'].habits['Exercise'].tally++;
this.setState({userList});
}
render() {
return (
<div>
<h2>{this.state.userList['12'].habits['Exercise'].tally}</h2>
<button onClick={() => this.inc()}>Increment</button>
</div>
)
}
};
Play with it here:
https://codesandbox.io/s/10w0o6vn0l