3
respostas

Propriedade aoDeletar não esta funcionando

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

3 respostas

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:

O seu está assim:

<AiFillCloseCircle 
            size={25} 
            className="deletar" 
            onClick={aoDeletar}/>

Tenta assim:

<AiFillCloseCircle 
            size={25} 
            className='deletar' 
            onClick={() => aoDeletar(colaborador.id)} 
        />

Espero que funcione. Qualquer coisa manda aqui de novo. Valeu.