Hope all is well, and that everyone has a great and safe weekend. I need a little help with this one. I have been stuck on this for a week now. I have a react native project where I am using a flatlist with a react native element checkbox inside of it. I have the flatlist displaying data fetched from my database. So everything works correctly. But when I check one of the items that is being displayed, it checks them all. I have googled and tried several different methods that I got off of here as well. Either nothing is checked or all is checked in the checkbox. Can you guys please take a look at my code below and let me know if I am missing something?
Thank you so much!!!
import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
} from 'react-native';
import {
ListItem,
CheckBox,
} from 'react-native-elements';
import BackButtonMGMT from '../Components/BackButtonMGMT';
export default class ViewCategory extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
checked: false,
}
}
render() {
const { navigation } = this.props;
const cust = navigation.getParam('food', 'No-User');
const other_param = navigation.getParam('otherParam', 'No-User');
const cust1 = JSON.parse(cust);
const data = cust1;
console.log(data);
return (
<View style={styles.container}>
<BackButtonMGMT navigation={this.props.navigation} />
<FlatList
data={data}
extraData={this.state}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<CheckBox
center
titleProps=
title={item}
iconRight
checked={this.state.checked}
size={30}
onPress={() => this.setState({checked: !this.state.checked})}
containerStyle={styles.checkBox}
//bottomDivider
//chevron
/>
)}
/>
</View>
)
}
onCheck = (item) => {
this.setState((state) => ({
checked: !state.checked,
}));
}
}
Aucun commentaire:
Enregistrer un commentaire