Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Bug reformulando formulário

Após a aula me deparei com esse erro, tentei resolver mas não consegui resolver:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue o código dos componentes ListaSuspensa:

import './ListaSuspensa.css'

interface ListaSuspensaProps {
    aoAlterado: (valor: string) => void
    label: string
    obrigatorio: boolean
    valor: string
    itens: string[]
}

const ListaSuspensa = (props: ListaSuspensaProps) => {
    return (
        <div className='lista-suspensa'>
            <label>{props.label}</label>
            <select onChange={evento => 
                props.aoAlterado(evento.target.value)} 
                required={props.obrigatorio} 
                value={props.valor}
            >
                <option value=""></option>
                {props.itens.map(item => {
                    return <option key={item}>{item}</option>
                })}
            </select>
        </div>
    )
}

export default ListaSuspensa

E do componente Formulário:

import { useState } from 'react'; 
import './Formulario.css'
import CampoTexto from '../CampoTexto';
import ListaSuspensa from '../ListaSuspensa';
import Botao from '../Botao';
import { IColaborador } from '../../shared/interfaces/IColaborador';



interface FormularioProps{
    aoColaboradorCadastrado: (colaborador: IColaborador) => void; 
    times: string[]

}

const Formulario = (props: FormularioProps) => {


    //VARÍÁVEIS QUE POSSO PEGAR ESSES VALORES E TRABALHAR COM ELES 
    //COMUNICAÇÃO ENTRE OS COMPONENTES
    const [nome, setNome] = useState(''); 
    const [cargo, setCargo] = useState(''); 
    const [imagem, setImage] = useState(''); 
    const [time, setTime] = useState(''); 



    //OBJETO
    const aoSalvar = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault(); 
        props.aoColaboradorCadastrado({
            nome, 
            cargo, 
            imagem,
            time
        }); 
        setNome('');
        setCargo('');
        setImage('');
        setTime('');
    }

    return (
        <section className="formulario" >
            <form onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar os dados 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 
                    obrigatorio={false} 
                    label="Imagem" 
                    placeholder="Imagem de perfil"
                    valor={imagem}
                    aoAlterado={valor => setImage(valor)}
                />
                <ListaSuspensa 
                    obrigatorio={true}
                    label="Time" 
                    itens={props.times} 
                    valor={time}
                    aoAlterado={valor => setTime(valor)}/>
                <Botao>
                    Criar Card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario;
2 respostas
solução!

Salve, João!

no App.js, você passou a lista de times para o componente Formulario? Assim:

<Formulario times={times.map(time => time.nome)} aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)}/>

Corrigido professor!

O nome da props do componente Formulario que estava errada! Estava se chamando, "nomeDosTimes". Agradeço!