How can we Check/Uncheck individual checkbox in flatlist based on index or by key in react-native flatlist

Question

there is a state value

savedData:{
        firstName: '',
        lastName: '',
        mobile: '',
        email: '',
        password: '',
        forgotPassword: '',
        checkbox1: false,
        checkbox2: false
      }

Text inputs and checkbox are in a flat list, each text input and checkbox is rendered in each cell. How can I update a value of checkbox in the array by index when onClick of checkbox is called, without using state variables or global variables?

i am updating text input values as shown below

   <Input
       placeholder={item.key}
       placeholderTextColor={'grey'}
       onChangeText={this.updateText.bind(this,item.key)}
       onSubmitEditing={ (event) => console.log(event)}
       underlineColorAndroid="transparent"
   />
  updateText(text,key){
    var change = this.state.savedData;
    var string1 = key;
    change[text] = string1;
    this.setState({ savedData: change });
  }

How can I update checkbox1 and checkbox2 values by index or based on key without using state variables or global variables and update in savedData object.

https://stackoverflow.com/questions/47362123/is-there-a-react-native-checkbox-example — Mihai Alexandru-Ionut, Jan 27 '20 at 12:47

score 1 · Accepted Answer · edited Jan 28 '20 at 10:40

import CheckBox from 'react-native-check-box';

export default class CheckBox extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [{
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,
            },
            {
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,

            },
            {
                firstname: 'abc',
                lastname: 'xyz',
                checked1: false,
                checked2: false,
            }],
        }
    }

    isCheckedOrNot(type, item, index) {
        if (type === 'cb1') {
            this.state.data[index].checked1 = !this.state.data[index].checked1;
        } else {
            this.state.data[index].checked2 = !this.state.data[index].checked2;
        }
        this.setState({
            data: this.state.data
        })
    }

    renderItem({ item, index }) {

        return (
            <View style={{ flexDirection: 'row', margin: 10 }}>
                <Text style={{ marginLeft: 5 }}> {item.firstname} </Text>
                <Text style={{}}> {item.lastname}, </Text>
                <CheckBox
                    value={item.isChecked1}
                    onClick={() => {
                        this.isCheckedOrNot('cb1', item, index)
                    }}
                    isChecked={item.checked1}
                />
                <Text style={{ marginLeft: 5 }}> checkbox 1</Text>
                <CheckBox
                    onClick={() => {
                        this.isCheckedOrNot('cb2', item, index)
                    }}
                    isChecked={item.checked2}
                />
                <Text style={{ marginLeft: 5 }}> checkbox 2</Text>
            </View>
        )
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    showsVerticalScrollIndicator={false}
                />
            </View>
        )
    }
}

hope it will help

How can we Check/Uncheck individual checkbox in flatlist based on index or by key in react-native flatlist

1 Answers1