title: React Native Table with Row Selection
body: <p>I am trying to create a React Native screen that allows the user to select which items to send to the server for batch processing.</p>
  <p>My thought was to have a table, and allow the user to select the rows they want, then click a button to submit to the server.</p>
  <p>I need the state to contain a list of the ids from those rows, so that I can use it to allow the user to send a request with that array of ids.</p>
  <p>A mock-up of my code is below, but it doesn't work.  When the update of state is in place, I get an error of &quot;selected items is not an object&quot;.  When it is commented out, of course the state update doesn't work, but it also doesn't set the value of the checkbox from the array if I hard code it in the state initialization (meaning is 70 is in the array, the box is still not checked by default), and it does allow the box to get checked but not unchecked.  How do I get it working?</p>
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, View } from 'react-native';
  import CheckBox from '@react-native-community/checkbox';
  import { Table, Row, TableWrapper, Cell } from 'react-native-table-component';
  import moment from 'moment';
  
  
  class FruitGrid extends Component {
  
      constructor(props) {
          super(props);
      }  
      state = {
          selectedItems : [70],
          data: []
      };
    
      refresh() {  
          let rows = [
            [69,'David','Apples'],
            [70,'Teddy','Oranges'],
            [73,'John','Pears']
          ];
          this.setState({data: rows});
      }
      componentDidMount()  {
          this.refresh(); 
      }
      setSelection(id) {
          const { selectedItems } = this.state;
  
          if (id in selectedItems)
          {
             this.setState({selectedItems: selectedItems.filter(i =&gt; i != id)});
          }
          else
          {
             this.setState({selectedItems : selectedItems.push(id)});
          }
      }
      render() {
          const { selectedItems, data } = this.state;
          let columns = ['',
          'Person',
          'Fruit'];
          
          return (
              &lt;View style={{ flex: 1 }}&gt;
                  &lt;Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}&gt;
                      &lt;Row data = {columns} /&gt;
                      {
                          data.map((rowData, index) =&gt;   
                          (
                              &lt;TableWrapper key={index}  style={styles.row}&gt;
                                   &lt;Cell key={0} data = {&lt;CheckBox value={rowData[0] in selectedItems} onValueChange={this.setSelection(rowData[0])} /&gt;} /&gt;
                                   &lt;Cell key={1} data = {rowData[1]} textStyle={styles.text}/&gt;
                                   &lt;Cell key={2} data = {rowData[2]} textStyle={styles.text}/&gt;
                              &lt;/TableWrapper&gt;
                          )
                          )
                      }
                  &lt;/Table&gt;
              &lt;/View&gt;
          );
    }
  }
  
  export default FruitGrid;
  
    const styles = StyleSheet.create({
      btn: { width: 58, height: 18, backgroundColor: '#8bbaf2',  borderRadius: 2 },
      btnText: { textAlign: 'center', color: '#000000' },
      text: { margin: 6 },
      row: { flexDirection: 'row' },
    });
    
  </code></pre>