Oii. Tudo bem?
O código do seu componente Time possui uma verificação (props.colaboradores.length > 0) que é muito importante: ela define que a seção do time só será renderizada na tela se houver, de fato, colaboradores dentro dela.
Se o card não está aparecendo, significa que essa lista props.colaboradores está chegando vazia para o time de Programação. Isso geralmente acontece por um detalhe na comparação dos nomes.
1. A escrita exata do nome do time
O React compara o valor que foi selecionado no formulário com o nome do time definido na sua lista principal (geralmente no App.js). Essa comparação deve ser exata.
- Verifique se no
App.js o nome do time é "Programação" (com cedilha e til). - Verifique se as opções do seu campo de seleção (Dropdown) estão escritas exatamente da mesma forma.
- Se um tiver "Programacao" e o outro "Programação", ou se houver um espaço extra no final da string, o filtro falhará e a lista ficará vazia.
2. Atenção aos acentos nas propriedades (props)
Notei no seu código o uso de props.corSecundária e props.corPrimária.
- Verifique no seu arquivo
App.js como essas propriedades estão sendo passadas. É um padrão comum em desenvolvimento evitar acentos em nomes de variáveis e propriedades (usando corPrimaria e corSecundaria). - Se no
App.js estiver sem acento e no Time.js estiver com acento (como no seu código), a cor não será encontrada e o fundo do time ficará transparente, o que pode dar a impressão de que o componente não está funcionando corretamente.
Como debugar
Para ter certeza do que está acontecendo, adicione um console.log antes do return do seu componente:
const Time = (props) => {
console.log(props.nome, props.colaboradores); // Adicione isso para testar
const css = { backgroundColor: props.corSecundária }
// ... restante do código
Abra o console do navegador (F12) e tente adicionar um card. Se o array de colaboradores aparecer vazio [] para o time de Programação, o problema é confirmado na filtragem (Ponto 1).
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
