Opa, boa noite! Desde a tarde de hoje que estou procurando o que está casando este erro. Quando eu adiciono o operador ternário ou um if simples para a validação do Time vazio, acontece este erro e a tela não é renderizada.

No console diz que ele não consegue ler a propriedade length deste código:

import React from 'react'
import Colaborador from '../Colaborador'
import './Time.css'

const Time = (props) => {

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

export default Time

Notei que ele tenta pegar o colaboradores através das props, mas o mesmo não é passado lá no app.js:

import { useState } from 'react';
import Banner from './components/Banner';
import { Cabecalho } from './components/Cabecalho';
import { Formulario } from './components/Formulario';
import Time from './components/Time';

function App() {

  const times = [
    ...
  ]

  const [colaboradores, setColoaboradores] = useState([])
  const addNovoColaborador = (colaborador) => {
    console.log(colaborador);
    setColoaboradores([...colaboradores, colaborador]) //Pega a lista de todos os Colab, adiciona o novo e devolve um novo array
  }

  return (
    <div className="App">
      <Cabecalho />
      <Banner />
      <Formulario
        aoColaboradorCadastrado={colaborador => addNovoColaborador(colaborador)} //Recebe os dados de "dentro da tag" e joga para consumo da função
        times={times.map(time => time.nome)}
      />
      {times.map(time => <Time
        key={time.nome}
        nome={time.nome}
        corPrimaria={time.corPrimaria}
        corSecundaria={time.corSecundaria}
        colaborador={colaboradores.filter(colaborador => colaborador.time === time.nome)} />)}

    </div>
  );
}

export default App;

Quando tento passar a mesma pelas props, o filtro não funciona Estou deixando passar algo? Obrigadão!!