Quando dou o console.log para ver as informações inseridas e proseguir com a criação do card ele não me da a posição escolhida. gostaria de saber qual melhor caminho para resolver esse problema.
![]( )
const Form = (props) => {
const times = [
'Duelista',
'Iniciador',
'Controlador',
'Sentinela'
]
const [nome, setNome] = useState('')
const [nick, setNick] = useState('')
const [imagem, setImagem] = useState('')
const [time, setTime] = useState('')
const aoSalvar = (evento) => {
evento.preventDefault()
props.aojogadorCadastrado ({
nome,
nick,
imagem,
time
})
}
return (
<section className='formulario'>
<form onSubmit={aoSalvar}>
<h2>Preencha os dados para criar o card do Valorant</h2>
<CampoTexto
obrigatorio={true}
label ='Nome'
placeholder ='Digite seu nome'
valor = {nome}
aoAlterar = {valor => setNome(valor)}
/>
<CampoTexto
obrigatorio={true}
label ='Nick'
placeholder ='Digite seu nick do jogo'
valor = {nick}
aoAlterar = {valor => setNick(valor)}
/>
<CampoTexto
label ='Imagem'
placeholder ='Mande sua imagem'
valor = {imagem}
aoAlterar = {valor => setImagem(valor)}
/>
<ListaSuspensa
obrigatorio={true}
label = 'Posição'
itens = {times}
valor = {time}
aoAlterar = {valor => setTime(valor)}
/>
<Button texto='Criar Card'/>
</form>
</section>
)
}
export default Form
import { useState } from 'react';
import Banner from './componentes/banner/banner';
import Form from './componentes/Formulario';
function App() {
const [Jogadores, setJogadores] = useState([])
const NovoJogador = (Jogador) => {
console.log(Jogador)
}
return (
<div className="App">
<Banner/>
<Form aojogadorCadastrado = {Jogador => NovoJogador (Jogador)} />
</div>
);
}
export default App;
import './ListaSuspensa.css'
const ListaSuspensa = (props) => {
return (
<div className='lista-suspensa'>
<label>{props.label}</label>
<select onChange={evento => props.aoAlterado(evento.target.value)} required={props.required} value={props.value}>
{props.itens.map(item => {
return <option key={item}>{item}</option>
})}
</select>
</div>
)
}
export default ListaSuspensa