ptb-fe/components/Sanksi/TablePenetapanSanksi.js

import React, { Component } from "react";
import { Card, Table } from "reactstrap";

export class TablePenetapanSanksi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			hisJenisPelanggaran: [],
			tbljenisPelanggaran: [],
		};
	}
	handleApplyClick = () => {
		const _noSangsi = document.getElementById("noSangsi").value;

		const _hisJP = [];
		//Get data for filter by checked
		this.state.tbljenisPelanggaran.filter((_jp) => _jp.checked == true).map((selectedPelanggaran) => _hisJP.push(selectedPelanggaran));

		this.state.hisJenisPelanggaran = [];
		this.state.hisJenisPelanggaran.push({
			noSangsi: _noSangsi,
			pelanggaran: _hisJP,
		});

		console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran);
	};
	// handle particular changes on each checkbox
	onHandleChange(listName, index) {
		//set state to checkbox and data in promise mode
		this.setState({
			[listName]: this.state[listName].map((item, i) => (index !== i ? item : { ...item, checked: !this.state[listName][index].checked })),
		});
	}

	renderTableData = () => {
		return this.state.tbljenisPelanggaran.map((jp, index) => {
			return (
				<tr>
					<td>
						<label>{index + 1}</label>
					</td>
					<td>
						<div className="media align-items-center">
							<div className="media-body d-flex">
								<div>
									<p>{jp.Pelanggaran}</p>
									<p>TMT : {jp.TMTBulan} Bulan</p>
									<p>Level Pelanggaran : {jp.LabelSangsi}</p>
								</div>
							</div>
						</div>
					</td>
					<td>
						<div className="media align-items-center">
							<div className="media-body d-flex">
								<div>
									<p>{jp.Sangsi}</p>
									<p>Keterangan : {jp.KeteranganSangsi}</p>
								</div>
							</div>
						</div>
					</td>
					<td>
						<div className="checkbox c-checkbox">
							<label>
								{/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
								<input
									//name="cb"{jp.idPelanggaran}
									type="checkbox"
									// checked={
									//     jp.checked=true
									// }
									checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
									//{this.state.listA[0].checked}
									onChange={(e) => this.onHandleChange("tbljenisPelanggaran", jp.idPelanggaran)}
								/>
								<span className="fa fa-check"></span>
							</label>
						</div>
					</td>
				</tr>
			);
		});
	};

	render() {
		return (
			<Card className="card-default">
				<Table bordered hover responsive>
					<thead>
						<tr>
							<th>No</th>
							<th>Jenis Pelanggaran</th>
							<th>Sanksi</th>
							<th></th>
						</tr>
					</thead>
					<tbody>{this.renderTableData()}</tbody>
				</Table>
			</Card>
		);
	}
}

export default TablePenetapanSanksi;