How to select multiple checkbox and get the value of selected checkbox in react native?

Question

I have a checkbox inside Flatlist, but I don't know how to get index of the checkbox and set checkbox from Flatlist. Also, I want to get data selected checkbox from flatlist. So the user will get selected checkbox either will be accepted or rejected base on button clicked.

This is my array :

const DATA = [
    {
        "start": "2022-01-01 10:35:08",
        "id": "298269",
        "tanggal": "01-01-2022",
        "hari": "Saturday",
        "waktu": "10:35:08",
        "keterangan_plan": null,
        "outlet": "26506",
        "nama": "RS Ibu dan Anak Propinsi NAD",
        "nama_customer": "DR. IQBAL",
        "customer": "39359",
        "prod1": "ADSV WOUND STRIP ",
        "prod2": "",
        "prod3": "",
        "prod4": "",
        "keterangan": "tes",
        "title": "",
        "end": "2022-01-01",
        "verifikasi": "Y",
        "status": null,
        "job": "Dokter",
        "lokasi": "-6.992191,107.590668",
        "verifikasi_plan": null
    },
    {
        "start": "2022-01-01 10:42:57",
        "id": "298270",
        "tanggal": "01-01-2022",
        "hari": "Saturday",
        "waktu": "10:42:57",
        "keterangan_plan": null,
        "outlet": "26506",
        "nama": "RS Ibu dan Anak Propinsi NAD",
        "nama_customer": "RONI",
        "customer": "39362",
        "prod1": "COAT ",
        "prod2": "",
        "prod3": "COAT ",
        "prod4": "",
        "keterangan": "cek",
        "title": "",
        "end": "2022-01-01",
        "verifikasi": "Y",
        "status": null,
        "job": "Pharmacist",
        "lokasi": "-6.992191,107.590668",
        "verifikasi_plan": null
    },
];

this is my code for rendering the flatlist

const SubmitVerKunjungan = () => {
    

    const [datas, setData] = useState(DATA);
    const [toggleCheckBox, setToggleCheckBox] = useState(false);

    const renderFlatlist = (renderData) =>{
        return(
            <FlatList
                    data={renderData}
                    renderItem={({ item }) => (
                        <View style={style.viewItem}>
                            <View style={style.firstItem}>
                                <Text style={style.tanggal}>{item.hari}, {item.tanggal}</Text>
                                <Text style={style.lokasi}></Text>
                                <Checkbox
                                    disabled={false}
                                    value={toggleCheckBox}
                                    onValueChange={(newValue) => setToggleCheckBox(newValue)}
                                />
                             </View>
                             <View style={style.secondItem}>
                                 <View style={style.secondItemSub}>
                                        <Image
                                          style={style.iconOffice}
                                            source={require('../../assets/office.png')}/>
                                        <View style={style.subSecondItem}>
                                            <Text style={style.subSecondItemTitle}>{item.nama}</Text>
                                            <Text style={style.subSecondItemTitle}>{item.nama_customer}       ({item.job})</Text>
                                        </View>
                                    </View>
                                    <Image
                                        style={style.iconMaps}
                                        source={require('../../assets/maps.png')}/>
                                </View>
                                <Text style={style.keteranganItem}>Keterangan : {item.keterangan}</Text>
                                <View style={style.thirdItem}>
                                    <Text style={style.produkItem}>Produk : {item.prod1},{item.prod2},{item.prod3},{item.prod4}</Text>
                                </View>
                            </View>)}
                        keyExtractor={item => item.id}
                    />
            
        )

    }

    return (
        <ImageBackground source={require('../../assets/background.jpg')} resizeMode="cover" style={style.imageBackground}>
            <View style={style.container}>
                <View style={style.buttonContainer}>
                    <View style={style.buttonView}>
                        <Text style={style.button}>APPROVE</Text>
                        {/* this will show checked item on checkbox */}
                    </View>
                    <View style={style.buttonView}>
                        <Text style={style.button}>REJECT</Text>
                    </View>
                </View>
                <ScrollView>
                    {renderFlatlist(datas)}
                </ScrollView>
            </View>
        </ImageBackground>
    );
};

export default SubmitVerKunjungan;

Usama Shahid · Accepted Answer · 2022-11-08 16:13:03Z

1

Do the simple trick Add state in your dataset or

setData(Data.map(item => {item.state = false; return item;}));

Then in checkbox

<Checkbox value={item.state} onPress={() => handleCheckbox(item)}

const handleCheckbox = (item) => {
const index = datas.findIndex(x => x === item);
const datasClone = [...datas];
datasClone[index].state = !datasClone[index].state;
setData(datasClone);
}

Get all the selected ones

const handleSubmit = () => {
const selectedOnes = datas.filter(x => x.state);
console.log(selectedOnes);
}

edited Nov 8, 2022 at 16:13

answered Feb 18, 2022 at 6:40

Usama Shahid

8758 silver badges9 bronze badges

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

4 Comments

Fajar Satya Sanjaya Over a year ago

I use useEffect for set setData(Data.map(item => {item.state = false; return data;})); but what should I return? Because data is not defined. Thank you

Usama Shahid Over a year ago

You can use useEffect that can work fine. However, you should return item instead of data

Fajar Satya Sanjaya Over a year ago

Thank you, this is work flawlessly. But I use onValueChange instead of onPress because I'm using expo checkbox.

Usama Shahid Over a year ago

That sounds great

Collectives™ on Stack Overflow

How to select multiple checkbox and get the value of selected checkbox in react native?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related