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>
)
}