Desde quando coloquei o aoDeletar, ele não aparece no meu organo. Avancei, coloquei o onClick e mesmo atualizando, não aparece nada de deletar
Desde quando coloquei o aoDeletar, ele não aparece no meu organo. Avancei, coloquei o onClick e mesmo atualizando, não aparece nada de deletar
Olá Alexandre! Tudo bem?
Pelo que entendi, você está com dificuldades em fazer a propriedade "aoDeletar" funcionar em seu componente React. É importante verificar se essa propriedade está sendo passada corretamente para o componente e se está sendo utilizada da forma correta dentro do mesmo.
Além disso, é interessante verificar se o evento "onClick" está sendo chamado corretamente e se está sendo implementado de forma adequada para realizar a exclusão do item desejado.
Caso ainda esteja com dificuldades, compartilha o seu código aqui com a gente, fica melhor para ajudar visualizando.
Espero ter ajudado e bons estudos!
import './colaborador.css'
import { AiFillCloseCircle } from 'react-icons/ai';
const Colaborador = ({ colaborador, corDeFundo, aoDeletar }) => {
return (<div className="colaborador">
<AiFillCloseCircle size={25} className="deletar" onClick={aoDeletar}/>
<div className="cabecalho" style={{ backgroundColor: corDeFundo }}>
<img src={colaborador.imagem} alt={colaborador.nome} />
</div>
<div className="rodape">
<h4>{colaborador.nome}</h4>
<h5>{colaborador.cargo}</h5>
</div>
</div>)
}
export default Colaborador
import Colaborador from '../Colaborador'
import './time.css'
const Time = ({ time, colaboradores, aoDeletar }) => {
return (
colaboradores.length > 0 && <section className='time' style={{ backgroundImage: 'url(/imagens/fundo.png)', backgroundColor: time.corPrimaria }}>
<h3 style={{ borderColor: time.corSecundaria }}>{time.nome}</h3>
<div className='colaboradores'>
{colaboradores.map((colaborador, indice) => <Colaborador key={indice} colaborador={colaborador} corDeFundo={time.corSecundaria} aoDeletar={aoDeletar}/>)}
</div>
</section>
)
}
export default Time
const [colaboradores, setColaboradores] = useState(inicial)
function deletarColaborador() {
console.log('deletando colaborador');
}
return (
<div>
<Banner />
<Formulario times={times.map(time => time.nome)} aoCadastrar={colaborador => setColaboradores([...colaboradores, colaborador])} />
<section className="times">
<h1>Minha organização</h1>
{times.map((time, indice) => <Time key={indice} time={time} colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)} aoDeletar={deletarColaborador} />)}
</section>
<Rodape />
</div>
);
}
export default App;
Olá, Alexandre.
Creio que precisa chamar uma função anônima no onClick do componente Colaborador:
<AiFillCloseCircle
size={25}
className="deletar"
onClick={aoDeletar}/>
<AiFillCloseCircle
size={25}
className='deletar'
onClick={() => aoDeletar(colaborador.id)}
/>
Espero que funcione. Qualquer coisa manda aqui de novo. Valeu.