[Dúvida] Mesmo com o Filter, não está filtrando os Colaboradores | React: desenvolvendo com JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Montando os times e atividade Mapeando os colaboradores

por Vinivaz193

| 11.9k xp | 8 posts

Boa tarde professor, não estou conseguindo filtrar os colaboradores mesmo com o filter:

App.js


import { useState } from 'react';
import Banner from './Componentes/Banner/Banner.js';
import Colaborador from './Componentes/Colaborador/index.js';
import Formulario from './Componentes/Formulario/index.js';
import Time from './Componentes/Time/index.js';




function App() {

  const Times = [

    {
      Nome: 'Programação',
      corPrimaria: '#57C278', 
      corSecundaria: '#09F7E9',
    },

    {
      Nome: 'Front-end',
      corPrimaria: '#82CFFA', 
      corSecundaria: '#E8F8FF',
    },

    {
      Nome: 'Data-science',
      corPrimaria: '#A6D157', 
      corSecundaria: '#F0F8E2',
    },

    {
      Nome: 'Develops',
      corPrimaria: '#E06869', 
      corSecundaria: '#FDE7E8',
    },

    {
      Nome: 'UX e Design',
      corPrimaria: '#DB6E8F', 
      corSecundaria: '#FAE9F5',
    },

    {
      Nome: 'Mobile',
      corPrimaria: '#FFBA05', 
      corSecundaria: '#FFF5D9',
    },

    {
      Nome: 'Inovação e Gestão',
      corPrimaria: '#FF8A29', 
      corSecundaria: '#FFEEDF',
    }

  ]

  const [Colaboradores, setColaboradores] = useState([])

  const aoNovoColaboradorAdicionado = (colaborador) => {
    console.log(colaborador)
    setColaboradores ([...Colaboradores, colaborador ])
  }

  return (
    /* JSX */
    <div className="App">
    <Banner/>
    <Formulario Times={Times.map(Times => Times.Nome)} aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>
    {/*  Times.map(Times => Times.Nome)*/}
    {Times.map(time => <Time 
    key={time.Nome} 
    Nome={time.Nome} 
    corPrimaria={time.corPrimaria} 
    corSecundaria={time.corSecundaria} 
    Colaboradores={Colaboradores.filter(Colaborador => Colaborador.Time === Time.nome)}
    />)}


    </div>
  );
}

export default App;

Time.js


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


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

    return (

        <section className='Time' style={css}>
            <h3 style={cssTitulo}>{props.Nome} </h3>

            <div className='colaboradores'>
            {props.Colaboradores.map(colaborador => <Colaborador  
            nome={colaborador.nome} 
            cargo={colaborador.Cargo} 
            imagem={colaborador.imagem} />)}    
            </div>
        </section>

    ) 

}

export default Time

Colaborador.js

import './Colaborador.css'

const Colaborador = (props) => {
    return(
        <div className='Colaborador'>
            <div className='cabecalho'>
                <img src={props.imagem} alt={props.nome} />
            </div>

            <div className='rodape'>
                <h4>{props.nome}</h4>
                <h5>{props.cargo}</h5>
            </div>
        </div>
    )

}

export default Colaborador

5 respostas

por Vinicios Neves

| 975.2k xp | 1062 posts

Instrutor Frontend Engineer

22/01/2023

Olá!

Repara aqui nesse trecho:

Colaborador.Time === Time.nome

No componente Formulario você está definindo colarborador.time ou colaborador.Time? Nesse cenário, letras maiusculas e minusculas fazem toda a diferença (inclusive eu recomendaria utilizar, por padrão, letras minusculas nesses casos).

Consegue compartilhar o código do componente Formulario? :)

por Vinivaz193

| 11.9k xp | 8 posts

23/01/2023

Consigo sim professor!

Formulario.js

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

const Formulario = (props) => {

   /*  const times = [
        'programação',
        'Front-end',
        'data Science',
        'Develops',
        'UX e Design',
        'Mobile',
        'Inovação e Gestão',
    ]
 */
    const [nome, setnome] = useState('')

    const [Cargo, setCargo] = useState('')

    const [imagem, setimagem] = useState('')

    const [Times, setTimes] = useState('')





    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado({
            nome,
            Cargo,
            imagem,
            Times
        })
    }


    return (
        <section className="Formulario">
            <form onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar o card do colaborador.</h2>
                <CampoTexto obrigatorio={true} label="Nome" valor={nome} aoAlterado={valor => setnome(valor)} placeholder="digite seu nome" />
                <CampoTexto obrigatorio={true} label="Cargo" valor={Cargo} aoAlterado={valor => setCargo(valor)} placeholder="digite seu cargo" />
                <CampoTexto obrigatorio={true} label="imagem" valor={imagem} aoAlterado={valor => setimagem(valor)} placeholder="digite o endereço da imagem" />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Times"
                    itens={props.Times}
                    valor={true}
                    aoAlterado={valor => setTimes(valor)}
                />
                <Botao texto="Criar Card" />
                {/* <Botao> criar Card </Botao> */}
            </form>

        </section>

    )

}

export default Formulario

por Vinivaz193

| 11.9k xp | 8 posts

23/01/2023

Percebi bastante durante esse curso que eu acabo confundindo muito o momento certo de utilizar maiúscula e minúscula, quais são esses momentos certos?

solução!

por Vinicios Neves

| 975.2k xp | 1062 posts

Instrutor Frontend Engineer

23/01/2023

Então, analisa aqui comigo oh:

   const [Times, setTimes] = useState('') //aqui deveria ser no sigular: [Time, setTime] 

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado({
            nome,
            Cargo,
            imagem,
            Time // logo, aqui também!
        })
    }

Porque lá no App você faz colaborador.Time, lembra?

Sobre utilizar maiusculas e minusculas, esse artigo vai te ajudar a entender as convenções :)

por Vinivaz193

| 11.9k xp | 8 posts

23/01/2023

Vinicios, fiz as alterações e agora não esta mais criando os cards, vou continuar dando uma olhada aqui até achar onde estou errando.