Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Quando clico no botão, o colaborador não aparece.

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

por Guilherme Rodrigues Grillo
| 16.2k xp | 11 posts

App()

import { useState } from "react"
import './style.css'
import Banner from "./Components/Banner/Banner"
import Formulario from "./Components/Formulario/Formulario"
import Time from "./Components/Time/Time"

function App() {

  const times = [
    { time: 'Programação',
      corPrimaria: '#57C278',
      corSecundaria: '#D9F7E9'
    },
    { time: 'Front End',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF'
    },
    { time: 'Data Science',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2'
    },
    { time: 'Devops',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8'
    },
    { time: 'UX e Design',
      corPrimaria: '#DB6EBF',
      corSecundaria: '#FAE9F5'
    },
    { time: 'Mobile',
      corPrimaria: '#FFBA05',
      corSecundaria: '#FFF5D9'
    },
    { time: 'Inovação e Gestão',
      corPrimaria: '#FF8A29',
      corSecundaria: '#FFEEDF'
    }
  ]
  
  const [colaborador, setColaborador] = useState([])

  const aoNovoColaboradorAdicionado = (colaboradores) => {
     setColaborador([...colaborador, colaboradores ])
     console.log(colaborador)
  }

  return (
    <>
      <Banner />

      <Formulario 
         times={times.map( times => times.time)} 
         colaboradorAdicionado={colaboradores => aoNovoColaboradorAdicionado(colaboradores)} 
      />

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

export default App

Time()

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

function Time({time, corPrimaria, corSecundaria, colaboradores}) {
  return (
    <section className='containerTime' style={{backgroundColor: corSecundaria}}>
        <h3 style={{borderBottom: `3px solid ${corPrimaria}`}}>{time}</h3>
        <div className='colaboradores'>
          {colaboradores.map( colaborador => <Colaborador nome={colaborador.nome} cargo={colaborador.cargo} imagem={colaborador.imagem} time={colaborador.time}/> )}
        </div>
    </section>
  )
}

export default Time;

Colaborador()

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

export default function Colaborador({nome, cargo, imagem}) {
  return (
    <div className='containerColaborador'>
        <div className='cabecalho'>
            <img src={imagem} alt={nome} />
        </div>
        <div className='rodape'>
            <h4>{nome}</h4>
            <h5>{cargo}</h5>
        </div>
    </div>
  )
}

Link do repositório: https://github.com/DevGuilhermeRodrigues/OrganoPeople

2 respostas
solução!
por Victor Costa Santos
| 1922.4k xp | 3690 posts
Alura Scuba Team Monitor de ForumOps

Olá Guilherme!

Percebi que você está filtrando os colaboradores com base no time.nome, mas no seu array de times, você está usando a chave time para o nome do time. Isso pode estar causando o problema. Vamos ajustar isso para garantir que os nomes dos times estejam corretos.

No seu componente App, você está filtrando os colaboradores com base em time.nome, mas a chave correta é time.time. Muda seu código para essa forma:

{times.map(time => (
  <Time  
    key={time.time} 
    time={time.time}
    corPrimaria={time.corPrimaria}
    corSecundaria={time.corSecundaria}
    colaboradores={colaborador.filter(colaborador => colaborador.time === time.time)} 
  />
))}

Por fim, você deve atualizar o seu componente formulário, o evento onSubmit deve estar no elemento <form>, e não no <section>:

import React, { useState } from 'react'
import CampoTexto from '../CampoTexto/CampoTexto'
import Button from '../Button/Button'
import ListaSuspensa from '../ListaSuspensa/ListaSuspensa'
import './Formulario.css'

export default function Formulario({ colaboradorAdicionado, times }) {

  const [nome, setNome] = useState('')
  const [cargo, setCargo] = useState('')
  const [imagem, setImagem] = useState('')
  const [time, setTime] = useState(times[0])  // Inicializar com o primeiro time

  const handlerSubmit = (event) => {
    event.preventDefault()

    colaboradorAdicionado({
      nome,
      cargo,
      imagem,
      time
    })

    // Um extra: Limpar os campos após a submissão
    setNome('')
    setCargo('')
    setImagem('')
    setTime(times[0])
  }

  return (
    <section className='containerForm'>
      <form onSubmit={handlerSubmit}>
        <h2 className='tituloForm'>Preencha os dados para criar o card do colaborador.</h2>
        <CampoTexto 
          mandatory={true} 
          type="texto" 
          placeholder="Digite seu nome" 
          label="Nome" 
          valor={nome}
          aoAlterado={valor => setNome(valor)}
        />

        <CampoTexto 
          mandatory={true} 
          type="texto" 
          placeholder="Digite seu cargo" 
          label="Cargo"
          valor={cargo}
          aoAlterado={valor => setCargo(valor)} 
        />

        <CampoTexto 
          type="texto" 
          placeholder="Informe o endereço da imagem" 
          label="Imagem"
          valor={imagem}
          aoAlterado={valor => setImagem(valor)} 
        />

        <ListaSuspensa 
          mandatory={true} 
          label="Time" 
          times={times} 
          valor={time}
          aoAlterado={valor => setTime(valor)}
        />

        <Button 
          texto='Criar card' 
        />
      </form>
    </section>
  )
}

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Guilherme Rodrigues Grillo
| 16.2k xp | 11 posts

Obrigado, deu certinho e mudei tmb o evento pro form