vendredi 18 septembre 2020

React Native Elements Checkbox keeps selecting all items instead of the one item this is selected

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