1
resposta

Projeto organo, Vinicios Neves

Projeto organo, não aparece o nome no card

import './Colaborador.css'

const Colaborador = ({nome,imagem,cargo,corDeFundo}) => {

return (<div className='colaborador'>
    <div className='cabecalho' style={{backgroundColor: corDeFundo}}>
        <img src={imagem} alt={nome} />
    </div>

    <div className='rodape'>
        <h4> {nome} </h4>                
        <h5>{cargo}</h5>
        
    </div>

</div>

)

} export default Colaborador

return (

<Formulario times={times.map(time => time.nome)} aoColaboradorCadastrado={colaborador => aoNovocolaboradorAdicionado(colaborador)} />
  {times.map(time => <Time
    key={time.nome}
    nome={time.nome}
    corPrimaria={time.corPrimaria}
    corSecundaria={time.corSecundaria}
    colaboradores={colaboradores.filter(colaborador => colaborador.time === time.nome)}
         />)}
      </div>
1 resposta

Olá Aguinaldo!

O componente Colaborador está recebendo uma prop chamada nome, que deveria ser exibida no elemento <h4>. Se o nome não está aparecendo, pode ser que a prop nome não esteja sendo passada corretamente para o componente Colaborador.

No componente onde você está usando o Colaborador, certifique-se de que está passando a prop nome. Por exemplo:

<Colaborador 
    nome={colaborador.nome} 
    imagem={colaborador.imagem} 
    cargo={colaborador.cargo} 
    corDeFundo={time.corPrimaria} 
/>

Certifique-se de que os objetos de colaborador realmente possuem a propriedade nome preenchida. Você pode fazer isso imprimindo no console:

console.log(colaboradores);

Isso ajudará a verificar se os dados estão corretos antes de serem passados para o componente.

Se depois de verificar essas dicas o problema persistir, peço para que me mande o seu código completo, seja pelo github ou google drive!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!