Vi no fórum que aconteceu com outras pessoas mas nenhuma das soluções deu certo comigo.
Formulario
import { useState } from 'react'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
const Formulario = () => {
const [nome, setNome] = useState['']
const [cargo, setCargo] = useState['']
const [imagem, setImagem] = useState['']
const aoSalvar = (evento) => {
evento.preventDefault()
console.log('Form foi submetido => ', nome, cargo, imagem)
}
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
obrigatorio={true}
label="Imagem"
placeholder="Informe o endereço da imagem"
valor={imagem}
aoAlterado={valor => setImagem(valor)}
/>
<ListaSuspensa />
<Botao>
Criar Card
</Botao>
</form>
</section>
)
}
export default Formulario
CampoTexto
import './CampoTexto.css'
import { useState } from 'react'
const CampoTexto = (props) => {
const placeholderModificada = `${props.placeholder}`
const aoDigitado = (evento) => {
props.aoAlterado(evento.target.value)
}
return (
<div className="campo-texto">
<label>
{props.label}
</label>
<input value={props.valor} onChange={aoDigitado} required={props.obrigatorio} placeholder={placeholderModificada}/>
</div>
)
}
export default CampoTexto