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

O console.log não entra a posição escolhida

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.

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

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;
3 respostas
solução!

Salve, Isaqui!

Consegue compartilhar o código do componente <ListaSuspensa />? Pode ser algo lá!

Opa, segue o código do componente

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 

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