Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Cards dos Colaboradores não estão sendo exibidos após adicionar o filter

Após a implementação do filter para separar os Colaboradores cadastrados por Time, os cards não estão sendo renderizados e nenhum erro no console é exibido. Por favor, poderiam me ajudar? Segue abaixo repositório do código.

https://github.com/lucianogomes02/organo-react

1 resposta
solução!

Consegui resolver! Caso alguém tenha o mesmo problema, se eu tentava cadastrar o colaborador sem alterar a opção de time (sendo a primeira Programação), o componente continuava com o valor inicial do estado do time que é "", tendo em vista que como não mexi no valor, ele não entrou na função aoAlterado, que altera o valor do estado inicial . Resolvi deixando "Programação" como valor padrão do estado do time. Não sei se é a melhor solução, mas funcionou. Se alguém souber de uma solução melhor, por favor me avise :)

import CampoTexto from "../CampoTexto/CampoTexto"
import "./Formulario.css"
import ListaSuspensa from "../ListaSuspensa/ListaSuspensa";
import Botao from "../Botao/Botao";

import {useState} from "react";

const Formulario = (props) => {

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

    const aoSalvar = (evento) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado(
            {
                nome: nome,
                cargo: cargo,
                imagem: imagem,
                time: time
            }
        )
    }

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

export default Formulario