React native / Flatlist with Switches : they switch back immediately - reactjs

Question

I'm pretty new to React, trying to do something (I thought) simple, a list of parameters with switches.
But when I switch them, they immediately switch back to original display. I saw some posts around that, but couldn't solve the problem.
I also tried to put the Switch value in a state, but then I get the "hooks can only be called inside of the body of a function component" error.
Here is the code :
const UserPlantsPrefs = ({userPlantsPrefs}) => {
const [prefs, setPrefs] = useState([
{
"plant": "plant one",
"hasPref": true
},
{
"plant": "plant two",
"hasPref": true
}
]);
function toggleSwitch(value, index) {
setPrefs((prevPrefs) => {
prevPrefs[index].hasPref = value;
return prevPrefs;
})
}
function PrefItem({item, index}) {
return (
<View>
<Text>{item.plant}</Text>
<Switch
onValueChange={(value) => {
toggleSwitch(value, index);
}}
value={item.hasPref}
/>
</View>
)
}
return (
<View style={{backgroundColor: "white"}}>
<FlatList data={prefs} renderItem={PrefItem}/>
</View>
)
}
export default UserPlantsPrefs;

Answer 1

Your call to setPrefs inside toggleSwitch returns the same object is is given after modifying it in-place.
If the result of a setState call is == equal to its previous value, React will not re-render, so in order to cause a re-render, you need to create a new object.
Here would be one way of creating a new object with the value you want:
setPrefs((prevPrefs) => {
return {
...prevPrefs,
[index]: {
...prevPrefs[index],
hasPref: value
}
}
})
(This snippet uses spread syntax and computed-property initialisers, which you may want to look up - or you can use any other way of shallow-cloning the object to create a new one)