[ReactJS]

import React, {useEffect, useState } from 'react';

import './index.css';

import api from '../../services/api';

export const NovoComplemento = () => {
const [compDescricao, setCompDescricao] = useState();
const [compTipo, setCompTipo] = useState('C');
const [compValor, setCompValor] = useState();

/* PEGAR GRUPOS NA ARRAY PARA O CHECKBOX */
const [grupos, setGrupos] = useState([]);
const [gruposSel, setGruposSel] = useState([]);


/* PEGAR OS GRUPOS PARA PODER SELECIONAR NOS COMPLEMENTOS */
let getGrupos = async () => {
api.get("api/v1/grupos")
.then(res => {
//console.log(res.data.grupos);
setGrupos(res.data.grupos);
})
.catch(e => console.log(e));
}

useEffect(() => {
getGrupos();
},[]);

const handleChangeComplementoTipo = function (e) {
setCompTipo(e.target.value);
};

const handleChangeGrupo = function (value) {
const b = [...gruposSel, {gru_uuid: value}];
setGruposSel(b);
alert(b);
};

return(
<form>
<header>COMPLEMENTO (MANUTENÇÃO)</header>
<fieldset>
<fieldset className="grupo">
<div className="campo">
<label htmlFor="descricao-complemento">Descrição</label>
<input type="text" id="descricao-complemento" name="descricao-complemento" style={{ width: '50em' }} value={ compDescricao } onChange={e => setCompDescricao(e.target.value)} />
</div>
</fieldset>

<fieldset className="grupo">
<div className="radio">
<p>Situação</p>
<label>
<input
type="radio"
value="O"
checked={ compTipo === 'O' }
onChange={ handleChangeComplementoTipo }
/>
Observação
</label>
</div>
<div className="radio">
<label>
<input
type="radio"
value="C"
checked={ compTipo === 'C' }
onChange={ handleChangeComplementoTipo }
/>
Complemento
</label>
</div>
<div className="campo">
<label htmlFor="valor-complemento">Valor</label>
<input type="text" id="valor-complemento" name="valor-complemento" style={{ width: '15em' }} value={ compValor } onChange={e => setCompValor(e.target.value)} />
</div>
</fieldset>

<fieldset className="grupo">
<legend>GRUPOS</legend>
{grupos.map(grupo => (
<fieldset className="grupo">
<div className="campo">
<label htmlFor="grupo-id" hidden={true}>{grupo.grupo_uuid}</label>
<label htmlFor="grupo-descricao">{grupo.gru_descricao}</label>
<input type="checkbox" id="grupo-descricao" name="grupo-descricao" value={grupo.grupo_uuid} onChange={e => handleChangeGrupo(e.target.value)} />
</div>
</fieldset>
))}
</fieldset>

</fieldset>
</form>
)
}


A função handleChangeGrupo adiciona novos objetos que estão sendo clicado no checkbox, só que o problema é que se eu desmarcar ele adiciona outra vez, ou seja está sendo duplicado, se alguém puder ajudar?

Continue reading...