Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Meu onClick não aparece no console

Segui todos os passos da aula, mas nada acontece no meu console quando eu clico para deletar.

Time.js:

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) => {
                    return <Colaborador key={indice} colaborador={colaborador} corDeFundo={time.corSecundaria} aoDeletar={aoDeletar} />
                })}
            </div>
        </section>

    )
}

export default Time

Colaborador.js:

import './colaborador.css'

const Colaborador = ({ colaborador, corDeFundo, aoDeletar }) => {
    return (
        <div className="colaborador">
            <div className='deletar' onClick={aoDeletar}>X</div>
            <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

App.js:

  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;
1 resposta
solução!

Oi, Emilly!

Acredito que o problema está no App.js, onde a função deletarColaborador está sendo executada imediatamente quando o componente é renderizado. Isso ocorre porque os parênteses () após o nome da função indicam uma chamada de função:

<Time 
    key={indice} 
    time={time} 
    colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
    aoDeletar={deletarColaborador()}
/>

Nessa parte aqui:

aoDeletar={deletarColaborador()}

Para passar a referencia da função para o componente Time, basta remover os parênteses, ficando assim:

<Time 
    key={indice} 
    time={time} 
    colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
    aoDeletar={deletarColaborador}
/>

Espero que ajude!