How to pass value to other page using Checkbox? - react-native

Question

I want to pass the checked value I get from using Flatlist, ListItem from React Native Elements, and Checkbox. I have retrieve the value, but I don't know how to proceed after that.
const [extra, setExtra] = useState();
const [val, setVal] = useState('');
const onCheck = (item, index, event) => {
let items = posts;
items[index].checked = items[index].checked ? ! items[index].checked : true
setExtra({posts:items})
setVal(e.target.value)
console.log(val) //returns undefined
}
return (
<FlatList
data={posts}
keyExtractor={(item, index) => 'item'+index}
renderItem={({item, index}) => (
<ListItem>
<Text>Product Name>
...
<CheckBox
checked={item.checked}
onPress={(e) => onCheck(item, index, event)}
/>
</ListItem>
)}
extraData={extra}
/>
<TouchableOpacity
onPress={() =>
props.navigation.navigate("Next", {items: items})} //not sure what to call instead of items, but I want to pass the selected value
>
<Text>SUBMIT</Text>
</TouchableOpacity>
)
Can you please tell me what to do, and fix if I did wrong?

Answer 1

Please share the full component, for now you can do something like this :
const [extra, setExtra] = useState();
const [val, setVal] = useState('');
const onChange = (val, index) => {
let items = [...posts];
if (val) {
const selectedItem = items[index];
items[index].checked = val;
setExtra({posts:items});
setVal(e.target.value)
console.log(val) //returns undefined
}
}
return (
<FlatList
data={posts}
keyExtractor={(item, index) => 'item'+index}
renderItem={({item, index}) => (
<ListItem>
<Text>Product Name>
...
<CheckBox
checked={item.checked}
onChange={(val) => onChange(value, index)}
/>
</ListItem>
)}
extraData={extra}
/>
<TouchableOpacity
onPress={() =>
props.navigation.navigate("Next", {items: items})} //not sure what to call instead of items, but I want to pass the selected value
>
<Text>SUBMIT</Text>
</TouchableOpacity>
)