Description
I am creating multiple switch components within a data table in React, but when I click on one, all of them are automatically clicked.
Code
const FormCreateRole = () => {
// Array for table header and its data
const tableHeader = [
"No",
"Menu",
"Sub Menu",
"Lihat",
"Tambah",
"Ubah",
"Hapus",
"Export",
];
const submenu = [
["-"],
["Akun Pengguna", "Grup & Kontrol Hak Akses Akun", "Antrian Pasien", "Rawat Jalan"],
["Pemeriksaan Penunjang", "Rekam Medis", "Admisi Rawat Jalan"],
["Status dan Penempatan Kamar", "Transfer Pasien"],
];
let i = 1;
const tableDataMenu = [
[i++, "Dashboard", submenu[0], "", null, null, null, ""],
[i++, "Konfigurasi/Pengaturan", submenu[1], "", "", "", "", null],
[i++, "Layanan Pasien", submenu[2], "", "", "", "", null],
[i++, "Rawat Inap", submenu[3], "", "", "", "", null],
];
// end Array data
const [switches, setSwitches] = useState({
lihat: false,
tambah: false,
ubah: false,
hapus: false,
export: false,
});
const handleSwitchChange = (event) => {
const id = event.target.id;
setSwitches(prevSwitches => ({...prevSwitches, [id]: event.target.checked }));
};
return (
<Table className="table-responsive">
<thead style={{ backgroundColor: "#ECEFF1" }}>
<tr>
{tableHeader.map((header, index) => (
<th
key={index}
className="txt-blue-grey-700 base-md text-bold text-center"
style={{ padding: "0.75rem" }}
>
{header}
</th>
))}
</tr>
</thead>
<tbody>
{tableDataMenu.map((row, idx) => (
<React.Fragment key={idx}>
<tr>
{row.slice(0, 2).map((cell, idx) => (
<td key={idx} className="text-center">
{cell}
</td>
))}
<td>
{row[2] && (
<div>
{row[2].map((sub, idx) => (
<div key={idx} className="mb-3">
{sub}
</div>
))}
</div>
)}
</td>
{row.slice(3).map((cell, idx) => {
const key = `${idx}-${row[1]}`;
return (
<td key={key}>
{row[2] &&
row[2].map((subIdx) => {
if (cell !== null) {
return (
<div
key={subIdx}
className="mb-3 text-center"
>
<Form.Check
type="switch"
id={key}
label=""
checked={switches[key]}
onChange={handleSwitchChange}
/>
</div>
);
}
return null;
})}
{cell}
</td>
);
})}
</tr>
</React.Fragment>
))}
</tbody>
</Table>
)
}
Question
How can I effectively solve this problem? So that I can click on only one switch without affecting the other switches.
Any help will be appreciated, thanks in advance.
