Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

[Dúvida] nao consegui

minha espreção nao deu certo. com relação adeixar somente os times que tem cadastroInsira aqui a descrição dessa imagem para ajudar na acessibilidadeimport Colaborador from "../Colaborador"; import "./Time.css";

const Time = (props) => { const css = { backgroundColor: props.corSegundaria };

return ( props.colaboradores.lenght > 0 && (

<h3 style={{ borderColor: props.corPrimaria }}> {props.nome}
    <div className="colaboradores">
      {props.colaboradores.map((colaborador) => (
        <Colaborador
          nome={colaborador.nome}
          cargo={colaborador.cargo}
          imagem={colaborador.imagem}
        />
      ))}
    </div>
  </section>
)

); };

export default Time;

6 respostas

Salve, Chayanny!

Olha, parece que está faltando um pedacinho de código.

Pra esconder os times que não possui colaboradores, nós usamos um if ternário.

A sintaxe dele é:

condição ? (valor se verdadeiro) : (valor se falso)

No nosso caso:

props.colaboradores.lenght > 0 (condição)

Valor se verdadeiro:

<section className='time' style={css}
    <h3> style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
    <div className='colaboradores'>
        {props.colaboradores.map( colaborador => <Colaborador nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem})}
    </div>
</section>

Valor se falso:

(uma string vazia)

''

Assim, o código no final fica assim:

const Time = (props) => {
    const css = { backgroundColor: props.corSecundaria }

    return (
        (props.colaboradores.length > 0) ? <section className='time' style={css}>
            <h3 style={{ borderColor: props.corPrimaria }}>{props.nome}</h3>
            <div className='colaboradores'>
                {props.colaboradores.map( colaborador => <Colaborador nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem}/> )}
            </div>
        </section> 
        : ''
    )
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

SALVO ELE FICA ASSIM Insira aqui a descrição dessa imagem para ajudar na acessibilidade

fui testar Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e nao deu certo ainda T.T Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Consegue subir o projeto no Github? Assim eu consigo te ajudar com mais precisão :)

vou tentar subir ele, pois nao lembro bem

Da uma olhada nesse video que pode te ajudar :)

solução!

Consegui colocar no git, mas ja encontrei o erro. foi uma troca de letra somente Obrigada pela atenção