Oi Alessandra,

Analisando seu código, o problema está na linha do filter.

Você está tentando comparar tecnologias.time com time.tipo, mas na verdade, o correto seria comparar com time.nome, pois é o nome do time que você está usando como referência para filtrar as tecnologias. 💪

Ajuste seu código para:

{times.map (time=> <Time 
      key={time.nome}
       nome={time.nome} 
       corPrimaria={time.corPrimaria} 
       corSecundaria={time.corSecundaria}
       tecnologia= {tecnologias.filter(tecnologia=>tecnologia.time===time.nome)}
       />)}

Para saber mais: Documentação do Array.prototype.filter() no MDN

Continue praticando e explorando o React! 💻 🔥

{times.map (time=> <Time 
      key={time.nome}
       nome={time.nome} 
       corPrimaria={time.corPrimaria} 
       corSecundaria={time.corSecundaria}
       tecnologia= {tecnologias.filter(tecnologia=>tecnologia.time===time.nome)}
       />)}

Com esse código 'time.nome' não gera o cartão com 'time.tipo' gera o cartão , mas não filtra.

subi o código para git https://github.com/AlessandraSantanna/organo.git

Alessandra,

Não encontrei no seu código no GitHub tecnologia.time ou time.tipo

Tecnologia tem os campos: tecnologia, imagem, tipo

Time tem os campos: nome, corPrimaria, corSecundaria

Se você souber algo diferente, me informe

Então o correto deveria ser:

tecnologia= {tecnologias.filter(tecnologia=>tecnologia.tipo===time.nome)}

Com tecnologias.time===time.tipo gera o cartão , mas não filtra, porque fica undefined===undefined. Sempre verdadeiro

quando coloco o código sugerido o cartão nem  é gerado.
tecnologia= {tecnologias.filter(tecnologia=>tecnologia.tipo===time.nome)}

não consigo achar a solução, atualizei o git.

• src/componentes/Formulario/index.js

import { useState } from 'react'
import Botao from '../../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

const Formulario =  (props)=> {

    const [tecnologia,setTecnologia]=useState('')
    const [imagem,setImagem]=useState('')
    const [tipo,setTipo]=useState('')

    const aoSalvar = (evento) =>{
        evento.preventDefault()
        props.atecnologiaCadastrada({
            tecnologia,
            imagem,
            tipo,

        })
        setTecnologia('')
        setImagem('') 
        setTipo('')
        
    }
    return(
        <section className="formulario">
            <form onSubmit={aoSalvar}>
                <h2>Preencha os Dados para criar o card das tecnologias necessários ser um dev </h2>

            <CampoTexto
             obrigatorio={true} 
             label="Tecnologia:"
              placeholder="Digite a Tecnologia"
              valor={tecnologia}
              aoAlterado={valor =>setTecnologia(valor)}

            />

            <ListaSuspensa
             obrigatorio={true}
              label="Tipo:" 
              itens={props.times}
              valor={tipo}
              aoAlterado={valor =>setTipo(valor)}
              />


            <CampoTexto
             label="Imagem:(https://avatar.iran.liara.run/public?username)"
              placeholder="copie e cole o link do avatar"
               valor={imagem}
              aoAlterado={valor =>setImagem(valor)}
            />
            <Botao>
            Criar Card
            </Botao> 

           
            </form>
        </section>
    )

}
export default Formulario

• src/App.js

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

function App() {
    const times = [
    {
      nome:'Programação',
      corPrimaria:'#57C278',
      corSecundaria:'#D9F7E9'
    },
    {
      nome:'FrontEnd',
      corPrimaria:'#82cffa',
      corSecundaria:'#E8F8FF'
    },
    {
      nome:'Data Science',
      corPrimaria:'#A6D157',
      corSecundaria:'#F0F8E2'
    },
    {
      nome:'Devops',
      corPrimaria:'#E06869',
      corSecundaria:'#FDE7E8'
    },
    {
      nome: 'UX e Design',
      corPrimaria:'#0B6EBF',
      corSecundaria:'#FEA9F5'
    },
    {
      nome:'Mobile',
      corPrimaria:'#FFBA05',
      corSecundaria:'#FFF5D9'
    },
    {
      nome:'Inovação e Gestão',
      corPrimaria:'#FF8A29',
      corSecundaria:'#FFEED9',
    }
  ];

  const [tecnologias, setTecnologia] = useState([]);
  const atecnologiaAdicionada = (tecnologia) => {
    console.log(tecnologia);
    setTecnologia([...tecnologias, tecnologia]);
  };

  return (
    <div className="App">
      <Banner />
      <Formulario times={times.map(time => time.nome)} atecnologiaCadastrada={tecnologia => atecnologiaAdicionada(tecnologia)} />
      {times.map(time => (
        <Time
          key={time.nome}
          nome={time.nome}
          corPrimaria={time.corPrimaria}
          corSecundaria={time.corSecundaria}
          tecnologia={tecnologias.filter(tecnologia => tecnologia.tipo === time.nome)}
        />
      ))}
    </div>
  );
}

export default App;