React Native - Cara Tambah Proteksi Checkbox Group

Halo semuanya... Kali ini kita akan membuat group checkbox dan proteksi maksimal pemilihan nilai pada React Native. Untuk cara pakai checkbox, bisa dilihat pada postingan React Native - Cara Pakai Checkbox. 

Sebelum masuk ke codingnya, saya akan menjelaskan singkat tentang alat yang dipakai. Aplikasi yang akan dibuat adalah aplikasi android. Aplikasi dibuat menggunakan React Native dengan versi 0.67.3. Dependencies yang digunakan untuk membuat checkbox adalah @react-native-community/checkbox (versi yang digunakan 0.5.16). Program di compile menggunakan PC dengan OS Windows 10.

Kita akan membuat checkbox group untuk memilih tambahan menu. Menu tambahan yang dipilih maksimal adalah 2. Langsung aja kita lihat codingnya.

import React from 'react';

import { View, Text } from 'react-native';

import CheckBox from '@react-native-community/checkbox';

const App = () => {

 

  const [selected, setSelected] = React.useState([]);

  const menu = ['Telur', 'Bakwan', 'Mendoan'];

  const onSelect = (label, value) => {

    if (value) {

      if(selected.length < 2) {

        setSelected(selected.concat(label));

      }

    } else {

      setSelected(selected.filter(d => d != label));

    }

  };

  return (

    <View style={{marginRight: 10, marginLeft: 10, marginTop: 25}}>

      <Text>Tambahan menu (maks 2):</Text>

      {menu.map((data, index) => (

        <View key={index} style={{flexDirection: 'row'}}>

          <CheckBox

            value={selected.find(d => d == data) ? true : false}

            onValueChange={newValue => onSelect(data, newValue)}/>

          <Text style={{paddingTop: 5}}>{data}</Text>

        </View>

      ))}

      <View style={{marginTop: 25}}>

        <Text>Tambahan menu: {selected.join(', ')}</Text>

      </View>

    </View>

  );

}

export default App;

Berdasarkan coding di atas, data menu yang dipilih hasilnya nanti akan berupa Array yang berisi menu apa saja yang telah pilih. Proteksi pemilihan maksimal terdapat pada fungsi onSelect. Untuk proteksi ini, bisa kita modifikasi misalnya kalau kita ingin ada alert jika ingin memilih lebih dari 2 atau lain sebagainya. Hasil keluaran dari coding ini dapat dilihat di bawah.

Sekian tentang cara penambahan proteksi checkbox group. Semoga membantu. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share