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

Não carrega caso não tenha nenhum time cadastrado

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

por João Pedro Amaral Bonfim
| 70.4k xp | 37 posts

Boa noite, estava seguindo as aulas, mas quando cheguei na parte do colaboradores.filter não é mostrado mais nada na página e no console afirma que não existe uma função chamada filter, porém ao tirar o filter e deixar somente colaboradores ele volta a funcionar e posso colocar o filter novamente.

Além disso, mesmo setando as entradas do formulário para vazias elas permanecem aparecendo mesmo vazias, e caso eu clique em adicionar novamente ela cria um colaborador vazio.

App.js

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

function App() {

  const times = [
    {
      nome: 'Programação',
      corPrimaria: '#57C278',
      corSecundaria: '#D9F7E9'
    },
    {
      nome: 'Front-End',
      corPrimaria: '#82CFFA',
      corSecundaria: '#E8F8FF'
    },
    {
      nome: 'Data Sciense',
      corPrimaria: '#A6D157',
      corSecundaria: '#F0F8E2'
    },
    {
      nome: 'Devops',
      corPrimaria: '#E06B69',
      corSecundaria: '#FDE7E8'
    },
    {
      nome: 'UX e Design',
      corPrimaria: '#D86EBF',
      corSecundaria: '#FAE5F5'
    },
    {
      nome: 'Mobile',
      corPrimaria: '#FEBA05',
      corSecundaria: '#FFF5D9'
    }
]

  const [colaboradores, setColaboradores] = useState('')

  const aoNovoColaboradorCadastrado = (colaborador) => {
    setColaboradores([...colaboradores, colaborador])
  }

  return (
    <div className="App">
    <Banner/>
    <Formulario time={times.map(time => time.nome)} aoColaboradorCadastrado={colaborador => aoNovoColaboradorCadastrado(colaborador)}/>
    {times.map(time => <Time 
      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) => {
    return (
        props.colaboradores.length > 0 && <section className="time" style={{backgroundColor: props.corSecundaria}}>
            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
            <div className='colaborador'>
                {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 = ({nome, cargo, imagem}) => {
    return (
        <section className='colaborador'>
            <div className='cabecalho'>
                <img src={imagem} alt={nome}/>
            </div>

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

        </section>
    )
}

export default Colaborador

Aqui como fica se do f5 com o filter ![](Imagem do erro do console )

3 respostas
solução!
por João Pedro Amaral Bonfim
| 70.4k xp | 37 posts

Formulário

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

const Formulario = (props) => {

    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado({
            nome,
            cargo,
            imagem,
            time
        })
        setNome('')
        setCargo('')
        setImagem('')
        setTime('')
    }

    return (
        <section className="formulario">
            <form onSubmit={aoSalvar}>
            <h2>Preencha os dados para criar o card de colaborador</h2>
            <TextField 
                valor={nome} 
                aoAlterado={valor => setNome(valor)} 
                required={true} 
                label="Nome" 
                placeholder="Digite seu nome"
            />
            <TextField 
                valor={cargo} 
                aoAlterado={valor => setCargo(valor)} 
                required={true} 
                label="Cargo" 
                placeholder="Digite seu cargo"
            />
            <TextField 
                valor={imagem} 
                aoAlterado={valor => setImagem(valor)} 
                label="Imagem" 
                placeholder="Digite o endereço da imagem"
            />
            <ListaSuspensa
                valor={time} 
                required={true} 
                label="Time" 
                itens={props.time}
                aoAlterado={valor => setTime(valor)}
            />
            <Botao>
                Criar Card
            </Botao>
            </form>
        </section>
    )
}

export default Formulario
por Renan Lima
| 3640.6k xp | 7680 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, João.

Tudo bem?

Eu cliquei no botão "solucionado" sem querer, mas eu vou te ajudar ainda.

por Renan Lima
| 3640.6k xp | 7680 posts
Alura Scuba Team Apoio Educacional - Alura

O problema que você está enfrentando é que o estado inicial que você definiu usando useState() é uma string vazia useState(""). Isso significa que quando você tenta aplicar um filter no array "colaboradores", que está armazenado nesse estado, o JavaScript não reconhece o método filter, já que ele só é aplicável em arrays.

O seu está assim:

const[colaboradores, setColaboradores] = useState("")

Para corrigir esse problema, é preciso definir o estado inicial como um array vazio, usando a seguinte sintaxe:

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

Espero ter ajudado. Bons estudos.