So I am working on a Table with one of its columns being checkboxes. These checkboxes original 'checked' values are initialized based on data that I will get from an API. The user later will be able to check/uncheck these checkboxes or check all of them at once by clicking on the checkbox on the header.
I'm currently using fake data, just want to get the function to work first. Below is my current code:
import React, { Component } from "react";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
import "./BUTable.styles.css"
import { Typography } from 'antd';
class BUTable extends Component {
constructor() {
super();
this.state = {
loading: true,
timestamp: "",
selectAll: false,
data: [],
SMScheckedOrigin: [],
SMSchecked: [true, true, true, false],
NFCchecked: [],
};
this.handleChangeSMS = this.handleChangeSMS.bind(this);
this.handleSingleCheckboxChangeSMS = this.handleSingleCheckboxChangeSMS.bind(
this
);
}
//for select all
handleChangeSMS = () => {
console.log("hi");
var selectAll = !this.state.selectAll;
this.setState({ selectAll: selectAll });
var checkedCopy = [];
this.state.data.forEach(function(e, index) {
checkedCopy.push(selectAll);
});
this.setState({
SMSchecked: checkedCopy
});
};
handleSingleCheckboxChangeSMS = (index) => {
console.log(index);
var checkedCopy = this.state.SMSchecked;
checkedCopy[index] = !this.state.SMSchecked[index];
if (checkedCopy[index] === false) {
this.setState({ selectAll: false });
}
this.setState({
SMSchecked: checkedCopy
});
};
componentDidMount() {
let data2 = [];
for (let i = 1; i <= 3; i++) {
this.state.SMScheckedOrigin.push({
eventCode: 'F'+i,
sms: 'true'
})
data2.push ({
key: i,
seasonCode: 'F19',
eventCode: 'F'+i,
eventName: 'Football vs Washington State',
sms: 'false',
nfc: 'true',
})
}
this.state.SMScheckedOrigin.push({eventCode: 'F01', sms: 'false'});
// this.state.SMScheckedOrigin.push({eventCode: 'F02', sms: 'true'});
data2.push({
key: 16,
seasonCode: 'F14',
eventCode: 'F01',
eventName: 'Basketball vs Michigan State',
sms: 'false',
nfc: 'false',
});
// data2.push({
// key: 17,
// seasonCode: 'F13',
// eventCode: 'F05',
// eventName: 'Baseball vs Missouri State',
// sms: 'true',
// nfc: 'false',
// });
var checkedCopy = [];
var selectAll = this.state.selectAll;
data2.forEach(function(e, index) {
checkedCopy.push(selectAll);
});
this.setState({
data: data2,
SMSchecked: checkedCopy,
selectAll: selectAll
});
//console.log ('origin' + this.state.SMScheckedOrigin);
}
render() {
console.log(this.state);
return (
<div>
<div className="container">
<ReactTable
data={this.state.data}
filterable = {false}
defaultCanSort
showPagination={false}
minRows= {0}
resizable= {true}
defaultPageSize = {400}
//defaultPageSize={this.state.data.length}
columns={[
{
Header: (<Typography.Text ellipsis={true}> Season Code </Typography.Text>),
accessor: "seasonCode",
width: 120,
resizable: false,
className: "table-hd"
},
{
Header: (<Typography.Text ellipsis={true}> Event Code </Typography.Text>),
accessor: "eventCode",
width: 110,
resizable: false,
className: "table-hd"
},
{
Header: (<Typography.Text ellipsis={true}> Event Name </Typography.Text>),
accessor: "eventName",
resizable: false,
className: "table-hd"
},
{
Header: state => (
<div className = "check-box-header">
<span>SMS</span>
<input
type="checkbox"
onChange={() => this.handleChangeSMS(state.sortedData)}
checked={this.state.selectAll}
/> </div>
),
Cell: row => (
<input
type="checkbox"
//defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
// default here by pre-set array?
checked={this.state.SMSchecked[row.index]}
onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
/>
),
width: 80,
sortable: false,
filterable: false,
resizable: false,
className: "right"
},
{
Header: state => (
<div className = "check-box-header">
<span>NFC</span>
<input
type="checkbox"
onChange={() => this.handleChangeSMS(state.sortedData)}
checked={this.state.selectAll}
/>
</div>
),
Cell: row => (
<input
type="checkbox"
defaultChecked={this.state.SMSchecked[row.index]}
checked={this.state.SMSchecked[row.index]}
onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
/>
),
width: 80,
sortable: false,
filterable: false,
resizable: false,
className: "right"
},
]}
className="-striped "
/>
</div>
</div>
);
}
}
export default BUTable;
In the part where I render the cell, I set checked to this.state.SMSchecked[row.index] which I initialized with [true, true, true, false] in the state, but I don't know why my checkboxes aren't initialized. They are all unchecked. How can I fix this? Thank you!
Cell: row => (
<input
type="checkbox"
//defaultChecked={Origin[row.index].sms === 'true'}
//defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
// default here by pre-set array?
checked={this.state.SMSchecked[row.index]}
onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
/>
),
