Oi, Nicholas, tudo bem?
O problema no seu código acontece no componente Formulario. Na criação das constantes com as listas do useState, o primeiro valor que representa o estado atual foi escrito com letra maiúscula e no restante do código usado com letra minúscula:
const [Nome, setNome] = useState('')
const [Cargo, setCargo] = useState('')
const [Imagem, setImagem] = useState('')
const [Time, setTime] = useState('')
O valor Nome, Cargo, Imagem e Time tinham sua inicial maiúscula. Para ajustar e fazer com que a criação dos cards inclua as informações, é preciso alterar para letra minúscula.
A correção ficaria assim:
import { useState } from 'react';
import Botao from '../Botão';
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa';
import './Formulario.css'
const Formulario = (props) => {
const [nome, setNome] = useState('')
const [cargo, setCargo] = useState('')
const [imagem, setImagem] = useState('')
const [time, setTime] = useState('')
const salvando = (e) => {
e.preventDefault()
props.aoCadastrado({
nome,
cargo,
imagem,
time
})
}
return (
<section className='Formulario'>
<form onSubmit={salvando}>
<h2>Preencha os dados para criar o card do colaborador.</h2>
<CampoTexto
label="Nome"
obrigatorio={true}
placeholder="Digite seu nome"
valor={nome}
alterado={valor => setNome(valor)}
/>
<CampoTexto
label="Cargo"
obrigatorio={true}
placeholder="Digite seu cargo"
valor={cargo}
alterado={valor => setCargo(valor)}
/>
<CampoTexto
label="Imagem"
placeholder="Informe o endereço da imagem"
valor={imagem}
alterado={valor => setImagem(valor)}
/>
<ListaSuspensa
obrigatorio={true}
label="Time"
itens={props.times}
valor={time}
alterado={valor => setTime(valor)}
/>
<Botao>
Criar card
</Botao>
</form>
</section>
)
}
export default Formulario;
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
