how to add checkbox in table view react-native

Question

I'm using react native expo. and trying to add table with checkbox functionality on check uncheck getting rowid and condition true or false and I want to add checkbox in react-native-table-component . I'm using below react native package for table . add checkbox but doesn't work.

I'm trying last one hour but doesn't success kindly help me below mentioned code.

I'm using expo-checkbox package for checkbox

NPM PACKAGE IM using

import React, { Component , useState} from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
import CheckBox from "expo-checkbox";
export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['RollNo', 'Name', 'Father Name', 'Action'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd']
      ]
    }
  }

  _alertIndex(index) {
    Alert.alert(`This is row ${index + 1}`);
  }

  render() {
    const state = this.state;
    const [agree, setAgree] = useState(false);
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
    <CheckBox
          value={agree}
          onValueChange={() => setAgree(!agree)}
          color={agree ? "#4630EB" : undefined}
        />
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
          
        <Table borderStyle={{borderColor: 'transparent'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          {
            state.tableData.map((rowData, index) => (
              <TableWrapper key={index} style={styles.row}>
                {
                  rowData.map((cellData, cellIndex) => (
                    <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text}/>
                  ))
                }
              </TableWrapper>
            ))
          }
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#66ff66' },
  text: { margin: 6 },
  row: { flexDirection: 'row', backgroundColor: '#b3ffb3' },
  btn: { width: 58, height: 18, backgroundColor: '#0073e6',  borderRadius: 2 },
  btnText: { textAlign: 'center', color: '#fff' }
});

David Scholz · Accepted Answer · 2022-08-17 21:26:09Z

You are mixing react class components and react functional components. You cannot call hooks inside the render function of your class component. Thus, the statement

render() {
    ...
    
    const [agree, setAgree] = useState(false);
    
    ...
}

is the issue here. Since you want a checkbox in each cell of a particular column you will need a state array and create a bijection between table indices and array elements of that state. You can keep this state in the class component as usual.

Judging from the provided code, it seems that you want to add a checkbox in the third column in every row. Furthermore, I have removed the TouchableOpacity. I guess that this was copied from the documentation.

Here is one possible solution.

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['RollNo', 'Name', 'Father Name', 'Action'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd']
      ],
      checks: [false, false, false, false],
    }
  }

  render() {
    const state = this.state;
    const element = (data, index) => (
        <CheckBox
          value={state.checks[index]}
          onValueChange={() => this.setState(prev => ({...prev, checks: prev.checks.map((value,i) => i === index ? !value : value)}))}
          color={state.checks[index] ? "#4630EB" : undefined}
        />
    );

    return (
      <View style={styles.container}>
          
        <Table borderStyle={{borderColor: 'transparent'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          {
            state.tableData.map((rowData, index) => (
              <TableWrapper key={index} style={styles.row}>
                {
                  rowData.map((cellData, cellIndex) => (
                    <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index - 1) : cellData} textStyle={styles.text}/>
                  ))
                }
              </TableWrapper>
            ))
          }
        </Table>
      </View>
    )
  }
}

Collectives™ on Stack Overflow

how to add checkbox in table view react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related