How To Handle Checkbox Fetching From Json Using React-native-element Checbox With FlatList React Native?

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 ex

Solution 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!

Solution 2:

You need to fill up the checked array in order to manipulate it after.

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

componentWillMount() {
  let { data, checked } = this.state;
  let intialCheck = data.map(x => false);
  this.setState({ checked: intialCheck })
}

and pass the index of the selected checkbox to update it

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

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

I hope it helps!

Solution 3:

you could try this for multiple selection, ref link-> https://facebook.github.io/react-native/docs/flatlist

class MyListItem extends React.PureComponent 
{
 _onPress = () => {
 this.props.onPressItem(this.props.id);
 };
 render() {
const textColor = this.props.selected ? 'red' : 'black';
return (
  <TouchableOpacity onPress={this._onPress}>
    <View>
      <Text style={{color: textColor}}>{this.props.title}</Text>
    </View>
  </TouchableOpacity>
   );
   }
   }
   class MultiSelectList extends React.PureComponent {
   state = {selected: (new Map(): Map<string, boolean>)};

   _keyExtractor = (item, index) => item.id;

    _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
     this.setState((state) => {
     // copy the map rather than modifying state.
     const selected = new Map(state.selected);
     selected.set(id, !selected.get(id)); // toggle
     return {selected};
      });
      };
     _renderItem = ({item}) => (
      <MyListItem
     id={item.id}
     onPressItem={this._onPressItem}
     selected={!!this.state.selected.get(item.id)}
     title={item.title}
     />
     );
     render() {
     return (
     <FlatList
     data={this.props.data}
     extraData={this.state}
     keyExtractor={this._keyExtractor}
     renderItem={this._renderItem}
     />
      );
      }
      }
     for(const ele of  this.state.selected.keys())
      console.log(ele);
      //**after that you could get all the selected keys or values from something like this**