ptb-fe/components/Sanksi/TablePenetapanSanksi.js

import React, { Component } from "react";
import { Card, Table } from "reactstrap";
import { getPelanggaran } from "@/actions/pelanggaran";

export class TablePenetapanSanksi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			checkedData: [],
			tbljenisPelanggaran: [],
			pelanggaran: null,
		};
	}

	componentDidMount = async () => {
		const pelanggaran = await getPelanggaran();
		this.setState({ pelanggaran });
	};

	onHandleChange = (index) => {
		const { pelanggaran, checkedData } = this.state;
		this.setState((prevState) => ({
			...prevState,
			pelanggaran: {
				data: prevState.pelanggaran.data.map((item, i) => (index !== i ? item : { ...item, checked: !pelanggaran.data[index].checked })),
			},
		}));
		this.setState({ checkedData: pelanggaran.data.filter((e) => e.checked) });
		// prevState.data.map((item, i) => (index !== i ? item : { ...item, checked: !pelanggaran.data[index].checked }));
		console.log(checkedData);
	};

	render() {
		const { pelanggaran } = this.state;
		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>
						{pelanggaran
							? pelanggaran.data.map((jp, index) => (
									<tr key={jp._id}>
										<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" onChange={(e) => this.onHandleChange(index)} />
													<span className="fa fa-check"></span>
												</label>
											</div>
										</td>
									</tr>
							  ))
							: ""}
					</tbody>
				</Table>
			</Card>
		);
	}
}

export default TablePenetapanSanksi;