Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] required na lista suspensa

O meu formulário não esta considerando "obrigatório" a lista suspensa, e quando o submit acontece é possível ver o console.log() que criamos para validar o formulário no console do navegador. Vou deixar o código para ver se vocês enxergam algum erro que eu cometi que eu mesma nao consigo identificar. (ps: os "campoTexto" estão funcionando com o required, só deu isso na lista suspensa msm)

código da Lista Suspensa

import './ListaSuspensa.css'

export const ListaSuspensa = (props) => {
  return (
    <div className='listaSuspensa'>

      <label>{props.label}</label>
      <select required={props.obrigatorio}>

        {props.itens.map(item => {
          return <option key={item}>{item}</option>
        })}

      </select>

    </div>
  )
}

código do formulário

import './Formulario.css'
import { CampoTexto } from '../CampoTexto'
import { ListaSuspensa } from '../ListaSuspensa'
import { Botao, BotaoCriaCard } from '../Botao/Botao'

export const Formulario = () => {

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

  const aoSalvar = (event) => { 
    event.preventDefault()
    console.log('o formulario foi submetido')
  }

  return (
    <section className='formulario'>
      <form onSubmit={aoSalvar}>
        <h1>Preencha os dados para criar o card do colaborador.</h1>
        <CampoTexto obrigatorio={true} label='Nome' placeholder='Digite seu nome'/>
        <CampoTexto obrigatorio={true} label='Cargo' placeholder='Digite seu cargo'/>
        <CampoTexto label='Imagem' placeholder='Informe o endereço da imagem'/>
        <ListaSuspensa obrigatorio={true} label='time' itens={times} />
        <BotaoCriaCard>Criar card</BotaoCriaCard>
      </form>
    </section>
  )
}
1 resposta
solução!

Olá, Helena.

Tudo bem?

Se eu não me engano ele não faz ainda por não ter um campo de <option> vazio no <select>, o instrutor vai colocar esse campo ainda mais pra frente no decorrer do curso. Agora o seu código parece estar correto.

Espero ter ajudado.

Qualquer dúvida manda aqui. Valeu Helena.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software