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;