sobre a condicional para time vazio

Salve, Helena!

Você me lembrou agora uma discussão (amigável :P) que tive com um amigasso meu sobre a legibilidade do ternário.

Seu questionamento é mega pertinente!

Tem até uma página no React que fala sobre isso, espia só.

Acho que, nesse sentido, devemos seguir o padrão que ficou especificado no projeto. Normalmente as empresas tem guidelines(diretrizes, no bom e velho pt-BR) para isso, sobre como utilizar ternário.

Tanto o if tradicional, que você trouxe, quanto o if ternário que fizemos em aula funcionam.

Inclusive, tem até uma outra abordagem que se vê muito por aí:

{props.colaboradores.length && <section className='grupoColaboradores' style={{ backgroundColor: props.corSecundaria }}>
        <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>}

Isto funciona porque em JavaScript, true && expressão são sempre avaliadas como expressão, e false && expressão são sempre avaliadas como false.

Excelente ponto, viu?

E, baseado na sua abordagem, eu experimentaria assim:

if (!props.colaboradores.length) {
    return ''
}
    return (
      <section className='grupoColaboradores' style={{ backgroundColor: props.corSecundaria }}>
        <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>)

Pessoalmente falando, eu tento evitar ao máximo o uso do else :)

Excelente pergunta! Bons estudos =]

Fiz com if e funcionou, pois estava tentando fazer de ambas as formas mostradas em aula e meu codigo parava de funcionar. Muito obrigada!