React native elements Checkbox selecting multiple items using react hooks - react-native

Question

I need a little help trying to figure this out. I am using react native elements flatlist with a checkbox inside of it. I am also using react hooks with this. Everything is working perfectly but when I try and select one of the items in the checkbox it selects all of the items. Now I have had this issue before when I was just using components and not hooks and functions. I tried to use the same method that I used here Selecting multiple items
Like this...
function ViewCategoryWS2({navigation}) {
const {category, setCategory} = useContext(ItemContext);
const [eats, setEats] = useState([]);
const [checked, toggleChecked] = useState(false);
function back() {
navigation.navigate('MenuWS2');
}
function test(index) {
const foods = category;
foods[index].checked = !foods[index].checked;
setCategory(foods);
}
return (
<View style={styles.container}>
<Icon
name='arrow-left'
color="#000000"
size={25}
style={styles.menuIcon}
onPress={back}
/>
<FlatList
data={category}
//extraData={eats}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<CheckBox
center
titleProps={{ color: 'black', fontWeight: 'bold'}}
title={item}
iconRight
checked={checked}
onPress={() => test(index)}
size={30}
containerStyle={styles.checkBox}
/>
)}
/>
</View>
)
}
and I keep getting this error TypeError: Attempted to assign to readonly property. I have also tried it this way...
<FlatList
data={category}
//extraData={eats}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<CheckBox
center
titleProps={{ color: 'black', fontWeight: 'bold'}}
title={item}
iconRight
checked={checked}
onPress={() => toggleChecked(!checked)}
size={30}
containerStyle={styles.checkBox}
/>
)}
/>
Here is my code from where the context is coming from. This page I pull data from my datbase and it displays categories. I click on any category and it pulls data from my database that's assigned to that certain category that was clicked on..
Here is the code...
import ItemContext from '../context/CategoryItems';
export default function menuWS({navigation}) {
const [restaurantlocationcode, setRestaurantlocationcode] = useState('')
const [menu, setMenu] = useState([]);
const {category, setCategory} = useContext(ItemContext);
const [selected, setSelected] = useState(0);
function viewMenu() {
fetch('URL', {
method: 'POST',
body: JSON.stringify({ restaurantlocationcode: restaurantlocationcode}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(response=> setMenu(response));
console.log(menu);
alert(menu);
}
function viewCategory({item}) {
fetch('URL', {
method: 'POST',
body: JSON.stringify({
category: item,
restaurantlocationcode: restaurantlocationcode,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(response => {
setCategory(response);
console.log(response);
alert(response);
});
navigation.navigate('ViewCategoryWS2', {category});
}
function showMenu() {
console.log(menu);
alert(menu);
}
const buttons = ['Menu']
return (
<View style={styles.container}>
<Input
style={styles.Input}
placeholder='Restaurant Location Code'
leftIcon={
<Icon
name='location-arrow'
size={24}
color='black'
/>
}
onChangeText={setRestaurantlocationcode}
value={restaurantlocationcode}
underlineColorAndroid='transparent'
/>
<ButtonGroup
onPress={viewMenu}
selectedIndex={selected}
selectedButtonStyle={{backgroundColor: 'blue'}}
buttons={buttons}
containerStyle={styles.buttonGroup}
/>
<FlatList
data={menu}
extraData={category}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => (
<ListItem
titleStyle={{ color: 'black', fontWeight: 'bold'}}
title={item}
onPress={() => viewCategory({item})}
bottomDivider
chevron
/>
)}
/>
</View>
)
}
Here is my useContext code...
import { createContext } from 'react';
const ItemContext = createContext({});
export default ItemContext;
Here is the second part to my useContext code..
import React, {useState} from 'react';
import ItemContext from './CategoryItems';
const MenuItemState = ({children}) => {
const [category, setCategory] = useState([]);
return (
<ItemContext.Provider value={{category, setCategory}}>
{children}
</ItemContext.Provider>
)
}
export default MenuItemState;
And it just selects all of the items. I'm not sure what I am missing. Help with this would be greatly appreciated.

Answer 1

App Output:
import React, { useState } from 'react';
import { Text, View, StyleSheet, CheckBox, Icon, FlatList } from 'react-native';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
/*
I am using this data, but you can continue
with the one you getting from context
*/
const data = [
{ id: 1, title: 'one', checked: true },
{ id: 2, title: 'two', checked: false },
{ id: 3, title: 'three', checked: false },
{ id: 4, title: 'four', checked: false },
{ id: 5, title: 'five', checked: false },
{ id: 6, title: 'six', checked: false },
];
export default function App() {
const [category, setCategory] = useState(data);
const [eats, setEats] = useState([]);
const [checked, toggleChecked] = useState(false);
function back() {
// navigation.navigate('MenuWS2');
}
function test(index) {
/*
Use this approach while changing the state.
This will create the copy of original array,
and you can perform mutation there
and update state with it.
*/
console.log(index);
const foods = [...category];
foods[index].checked = !foods[index].checked;
setCategory(foods);
}
/*
In your Checkbox component,
use "onChange" prop instead of "onPress"
and "value" instead of "checked"
*/
return (
<View style={styles.container}>
<FlatList
data={category}
//extraData={eats}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<Card style={{ padding: 10, margin: 5 }}>
<Text>{item.title}</Text>
<CheckBox
center
titleProps={{ color: 'black', fontWeight: 'bold' }}
title={item}
iconRight
value={item?.checked}
onChange={() => test(index)}
size={30}
containerStyle={styles.checkBox}
/>
</Card>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 24,
backgroundColor: 'grey',
flex: 1,
},
});
Working Example: Expo Snack