Possuo um array com objetos para renderizar alguns checkBox. Porém quando chamo a função onClick ou onChange meu e.target.value fica como “on”, preciso saber o valor de qual elemento foi clicado para atualizar meu estado do array com o novo valor do checkbox.
let arrayNiveis = [
{
id: 1,
codigo: 16,
filhos: [
{
id: 2,
codigo: 17,
filhos: null,
marcado: false,
menu: 1,
nivel: 1,
nome: "Listar",
opcao: 2,
pai: 1
},
{
id: 3,
codigo: 19,
filhos: null,
marcado: false,
menu: 1,
nivel: 2,
nome: "Disponível",
opcao: 2,
pai: 1
}
],
marcado: false,
menu: 1,
nivel: 0,
nome: "MANUTENÇÃO DE SERIAIS",
opcao: 2,
pai: null
}
];
const handleCheckBox = (e: any) => {
console.log("entro no check")
arrayGrupoNiveis.map((nivelItem: any) => (
nivelItem.codigo == e.target &&
nivelItem.filhos.map((filho: any) => (
filho.codigo == e.target &&
(filho.marcado = !filho.marcado)
))
))
};
return (
<FormProvider>
{
arrayGrupoNiveis.map((nivelItem: any) => (
nivelItem.menu == 1 ?
{
nivelItem.filhos.map((filho: any) => (
<Box sx={{ marginLeft: 4 }}>
<FormControlLabel
control={
<Checkbox
checked={filho.marcado}
size="small"
onClick={handleCheckBox}
/>}
label={filho.nome}
/>
</FormControlLabel>
</Box>
))
}
:
<Box>
</Box>
))
}
</FormProvider >
);
Tentei passar o codigo do pai e do filho porem ele atualiza todos os valores, preciso atualizar somente o elemento que for clicado.