how to correctly pass array to state - reactjs

Question

I have problem with react setState i want to pass to state disciplinesArray
in function setArray(). sorting goes well but array is not filtred. in console log in setArray() I see filtered and sort array but state is only sort.
All works until I add setToggle() and setInitialArray()
constructor(props) {
super(props)
this.state = {
filterType: 'all',
sortType: 'alphabetical',
arrayOfDisciplines: this.setInitialArray()
}
}
componentDidUpdate(prevState) {
console.log(this.state)
if (prevState===this.state) {
this.setState({
disciplinesArray: this.setArray()
})
}
}
setInitialArray() {
let disciplinesArray = this.props.disciplines
disciplinesArray = disciplinesArray.map((discipline) => {
return discipline = {
...discipline,
score: disciplineScore(this.props.athlete.skillset, discipline.requirements),
isHidden: false
}
})
return disciplinesArray
}
setArray() {
let disciplinesArray = this.state.arrayOfDisciplines
switch (this.state.sortType) {
case 'alphabetical':
disciplinesArray = disciplinesArray.sort((a, b) => {
return a.name.localeCompare(b.name)
})
break
case 'score':
disciplinesArray = disciplinesArray.sort((a, b) => {
return a.score - b.score
})
break
default:
}
switch (this.state.filterType) {
case 'team':
console.log('team')
disciplinesArray = disciplinesArray.filter((discipline) => {
return discipline.isIndividual === false
})
break
case 'individual':
console.log('team')
disciplinesArray = disciplinesArray.filter((discipline) => {
return discipline.isIndividual === true
})
break
default:
}
return disciplinesArray
}
setToggle(disciplineName, props) {
let disciplinesArray = this.state.arrayOfDisciplined
disciplinesArray.find((discipline) => {
return discipline.name === disciplineName
}).isHidden = !disciplinesArray.find((discipline) => {
return discipline.name === disciplineName
}).isHidden
console.log(disciplineArray)
return disciplinesArray
}
setSortType(e) {
this.setState({
sortType: e.target.value
})
}
setFilterType(e) {
this.setState({
filterType: e.target.value
})
}
}
I'm expecting filtered and sorted array in state

Answer 1

I am afraid that your code is full of small bugs. The fact that sorting works is actually a random consequence of another bug. Consider that your initial state:
this.state = {
filterType: 'all',
sortType: 'alphabetical',
arrayOfDisciplines: this.setInitialArray()
}
Stores the initial array into this.state.arrayOfDisciplines.
When changing the value however:
this.setState({
disciplinesArray: this.setArray()
})
You are storing that to this.state.disciplinesArray.
That cannot work, they should be the same.
The fact that it works is caused by another bug:
let disciplinesArray = this.state.arrayOfDisciplines
switch (this.state.sortType) {
case 'alphabetical':
disciplinesArray = disciplinesArray.sort((a, b) => {
return a.name.localeCompare(b.name)
})
break
This actually takes the reference to the array in your state, sorts that array in your state and stores in a local variable. Note that Array.sort sorts an array in-place, therefore you should usually prefix that by slice:
disciplinesArray = disciplinesArray.slice().sort((a, b) => {
return a.name.localeCompare(b.name)
})
In summary: your bug is a bad property name in setState and the fact that you are changing the value inside state directly.
The same problem can be seen also in setToggle function, which also modifies state directly. It should look something like this:
return this.state.arrayOfDisciplined
// always create a new array, don't just update a value inside the array
.map(discipline => {
if (discipline.name !== disciplineName) {
return discipline;
}
// always create a new immutable object, don't mutate the old state
return {
...discipline,
isHidden: !discipline.isHidden
};
});