Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Console não exibe o time que eu seleciono

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Interagindo com o usuário e atividade Controlando o estado

por Lucas Ferreira de Lima
| 126.5k xp | 6 posts

Quando aperto o botão de criar card, o time que eu selecionei não aparece no console. Já vi outra pessoa que tinha uma dúvida idêntica aqui no fórum e tentei resolver por aquele método, mas ainda não exibe no console

Lista Suspensa:

import './ListaSuspensa.css'

const ListaSuspensa = (props) => {

    return (
        <div className='lista-suspensa'>
            <label>{props.label}</label>
            <select required={props.required}>
                <option value=""></option>
                {props.itens.map(item => {
                    return <option key={item}>{item}</option>
                })}
            </select>
        </div>
    )
}

export default ListaSuspensa

Formulario:

import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
import {useState} from 'react'

const Formulario = () => {

    const times=['Programação', 'Front-end', 'Data-Science', 'Devops', 'UX e Design', 'Mobile', 'Inovação e Gestão']

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

    const aoSalvar = (evento) => {
        evento.preventDefault()
        console.log('Form foi submetido => ', nome, cargo, imagem, 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 seu nome"
                    valor={nome}
                    aoAlterado={valor => setNome(valor)}
                />
                <CampoTexto 
                    obrigatorio={true} 
                    label="Cargo" 
                    placeholder="Digite 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"
                    itens={times}
                    valor={time}
                    aoAlterado={valor => setTime(valor)}
                />
                <Botao>
                    Criar Card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario

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

1 resposta
solução!
por Renan Cezar Wuicik
| 2932.9k xp | 6021 posts
Instrutor Suporte Educacional Start By Alura

Olá Lucas, tudo bem contigo?

Ao analisar seu código, vejo que você não está passando o valor selecionado da lista suspensa para o componente select. Isso ocorre porque você precisa definir o atributo value no elemento select e adicionar um manipulador de eventos para atualizar o valor selecionado.

Aqui está o código atualizado do componente ListaSuspensa:

import './ListaSuspensa.css'
import { useState } from 'react';

const ListaSuspensa = (props) => {
  const [valorSelecionado, setValorSelecionado] = useState('');

  const aoAlterarValor = (evento) => {
    const novoValor = evento.target.value;
    setValorSelecionado(novoValor);
    props.aoAlterado(novoValor); // Chame a função de callback passando o novo valor selecionado
  };

  return (
    <div className='lista-suspensa'>
      <label>{props.label}</label>
      <select required={props.required} value={valorSelecionado} onChange={aoAlterarValor}>
        <option value=""></option>
        {props.itens.map((item) => {
          return <option key={item}>{item}</option>;
        })}
      </select>
    </div>
  );
};

export default ListaSuspensa;

Nesse código, adicionei o estado valorSelecionado usando o hook useState. Em seguida, defini o atributo value do elemento select como valorSelecionado e adicionei um manipulador de eventos onChange para chamar a função aoAlterarValor sempre que o valor selecionado for alterado.

Além disso, dentro do manipulador de eventos aoAlterarValor, atualizamos o estado valorSelecionado com o novo valor selecionado e chamamos a função de callback props.aoAlterado para informar o novo valor selecionado ao componente pai.

Certifique-se de usar o componente atualizado ListaSuspensa no seu formulário. Isso deve permitir que o valor selecionado seja exibido corretamente no console quando você pressionar o botão "Criar Card".

Em suma seria isso. Se você tiver mais perguntas ou precisar de mais assistência, sinta-se à vontade para perguntar.

Abraços e bons estudos.