React native elements checkbox selecting multiple items

Question

So I am working on a project where I am using react native elements checkbox and I finally got it working where it does not select all of the fetched items at one. It only selects one time at a time, and if I try to select another item it will unselect the first item and select the second. But now it will not allow me to select multiple items at once. I have searched google, on this platform, and also reddit and I can not find any solutions.

Here is my code

constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            checked: null,
        }
    }

    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={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={this.state.checked == item}
                        size={30}
                        onPress={() => this.setState({checked: item})}
                        containerStyle={styles.checkBox}
                        />
                        
                    )}
                />

            </View>
        )
    }

I have tried to change the checked line within the CheckBox. I have tried to checked={!!item.checked} and it does not work. I have tried checked={!this.state.checked} and this does not work either. Has anyone came across this problem, and if so how did you solve this?

In that case your data source must store the checked param for each item. — Sameer Kumar Jain
– Sameer Kumar Jain, Commented Sep 25, 2020 at 13:15
@SaachiTech so like once an item is checked its pushed into an array? But the problem that I am having is when I select an item and then try and select another one, the first item becomes unselected and the second item is selected. — Jca39A
– Jca39A, Commented Sep 25, 2020 at 13:23

Sameer Kumar Jain · Accepted Answer · 2020-09-25 14:04:20Z

Right now your state have one parameter, checked, which stores the checked state of an item. That means every time you select another checkbox, the previous selection will be lost. To allow multiple selects we must manage an array of checkbox state. This could be achieved by different approaches, here is the approach I would suggest

First, you need to modify your constructor

constructor(props) {
  super(props);
  const  { navigation } = props;
  const cust = navigation.getParam('food', 'No-User');
  const other_param = navigation.getParam('otherParam', 'No-User');
  const cust1 = JSON.parse(cust);
  //Here we will make array of object with additional parameter, checked
  //This assume cust1 will be ["Pecan Cookies", "Strawberry Cheesecake"]
  const data = cust1.map(item=>({label:item, checked:false});
  this.state = {
    dataSource: [],
    data,
    checked: null,
  }
}

Now let's update your render function

onChecked = (index) => {
  let {data} = this.state;
  data[index].checked = !data[index].checked;
  this.setState({data})
}
render() {
const { data} = this.state;
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={{ color: 'black', fontWeight: 'bold'}} title={item.label} iconRight
      checked={item.checked} size={30} onPress={()=>this.onChecked(index)}
      containerStyle={styles.checkBox}
      />

      )}
      />

</View>
)
}

This should solve the problem or having multiple selection.

Sorry It took me so long to reply, I had a very busy weekend. I just added this to my code and it works exactly how I need it to!!! Thank you so much!!!!

Collectives™ on Stack Overflow

React native elements checkbox selecting multiple items

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related