How to handle checkbox fetching from json using react-native-element checbox with FlatList React Native?

Question

I'm trying to create dynamic checkbox with the name fetching from json, this issue looks same as I need, but without the code explaining, I can't archieve my goal,

I have a json example like this :

this.state = {
  data : [
  {
    "name": "ALL",
  },
  {
    "name": "Android",
  },
  {
    "name": "iOS",
  },
  {
    "name": "React Native",
  }
]}

and with this code below:

<CheckBox
  center
  title={this.state.data[1].name}
  onPress={() => {this.setState({checked: !this.state.checked})}}
  checked={this.state.checked}
/>

the checkbox running well but it's just showing 2nd value of json

My Goal is to displaying all of json value into flatlist and makes checkbox running well,

For now I just can displaying those json into FlatList, but the checkbox is not works

import React, { Component } from 'react';
import {
  Text, View, StyleSheet, Alert, FlatList
} from 'react-native';
import Dimensions from 'Dimensions';
import { CheckBox } from 'react-native-elements'

const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;

class MedicalClearlance extends React.Component {

  constructor(props){
    super(props); 
    this.state = {
      checked:[],
      data : [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ]}
  }

  render() {
    return (
      <FlatList
        data={ this.state.data }
        renderItem={({item, index}) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => {this.setState({checked: !this.state.checked}), console.log(this.state.checked +' '+ index)}}
          checked={this.state.checked}/>
        }
      />
    );
  }
}

anyone can help me how to archieve my goal?

Answer 1

The answer that Ahsan Ali provided will work. However it is missing a very vital line of code.

• Within the <FlatList/> component, be sure to add this extraData ={this.state}. This will allow the FlatList component to re-render whenever the state is changed.

The render method will then look like this:

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      extraData={this.state}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

More information can be found at React-Native Flat-List documentation here.

---

If you're using the code from Ahsun Ali's post, there may be another error you come across.

• A warning error displays that the componentWillMount() method is deprecated. In which case be sure to use the componentDidMount() instead.

Hope this helps people!