How to select mulitple items with listview using checkbox in react native?

Question

I'm working on listview with checkbox. I'm trying to select multiple items but I discovered something in the result that every time I click the checkbox the result is replacing the first item that I checked

here's my case:

    this.state = {
     ...
     checkedBoxCheck: false,
     selectedItems:[],
   };

    renderRow(rowData) {
        return (
            ...
           <CheckBox style={styles.checkboxed}
              checked={rowData.id === this.state.checkedBoxCheck}
              onPress={() => this.onItemSelect(rowData)}
            />
        );

onItemSelect(row){
    this.setState({
        selectedItems: [{row}],
        checkedBoxCheck: true,
    });
    let myitem = this.state.selectedItems.concat({row});
    console.log(myitem);
}

temakozyrev · Accepted Answer · 2017-09-13 01:06:34Z

2

You forgot to write in the state the previous values selectedItems:

this.setState((prevState) => ({
    selectedItems: [...prevState.selectedItems, row],
    checkedBoxCheck: true,
}));

And deleting value (with lodash):

this.setState((prevState) => ({
    selectedItems: _.without(prevState.selectedItems, row),
    checkedBoxCheck: !!_.without(prevState.selectedItems, row).length,
}));

edited Sep 13, 2017 at 1:06

answered Sep 13, 2017 at 1:00

temakozyrev

3721 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mingmingming Over a year ago

I'm sorry but I got selectedItems undefined and setState is not a function.

temakozyrev Over a year ago

checked={rowData.id === this.state.checkedBoxCheck} what is it? You have array in state, you can not make a comparison this way.

temakozyrev Over a year ago

[{row}] it is [ { row: row } ] but I do not understand why you are doing this

mingmingming Over a year ago

Sorry, I thought this line --- checked={rowData.id === this.state.checkedBoxCheck} causes the problem why the checked box is not showing I forgot to delete that,

temakozyrev Over a year ago

@kkumber gist.github.com/TemaKozyrev/40337a569ae397ab19b76453f1dfaf5c/…

|

Kuldeep Saxena · Accepted Answer · 2017-09-13 05:27:37Z

0

Try to use the select field of Form Builder. https://github.com/bietkul/react-native-form-builder

answered Sep 13, 2017 at 5:27

Kuldeep Saxena

2,0331 gold badge18 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to select mulitple items with listview using checkbox in react native?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related