Estou trilhando no curso React 19: JSX, componentes, form action e useState Não cria evento no dev toools não aparece nada
import "./formulario-de-evento.estilos.css";
import { CampoDeEntrada } from "../CampoDeEntrada";
import { CampoDeFormulario } from "../CampoDeFormulario";
import { Label } from "../Label";
import { TituloFormulario } from "../TituloFormulario";
import { ListaSuspensa } from "../ListaSuspensa";
import { Botao } from "../Botao";
export function FormularioDeEvento({ temas }) {
function aoFormSubmetido (formData) {
console.log('opa, tá na hora de criar um novo evento', formData)
const evento = {
capa: formData.get('capa'),
tema: temas.find(function(item) {
return item.id == formData.get('tema')
}),
data: new Date(formData.get('dataEvento')),
titulo: formData.get('nomeEvento')
}
console.log('esse é o evento', evento)
}
return (
<form className="form-evento" action={aoFormSubmetido}>
<TituloFormulario>Preecha para criar um evnento:</TituloFormulario>
<div className="campos">
<CampoDeFormulario>
<Label htmlFor="nomeEvento">Qual o nome do evnento?</Label>
<CampoDeEntrada
type="text"
id="nomeEvento"
placeholder="Summer dev hits"
name="nomeEvento"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="capa">Qual o nome do evnento?</Label>
<CampoDeEntrada
type="text"
id="capa"
placeholder="'https://..."
name="capa"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="dataEvento">Data do evento</Label>
<CampoDeEntrada type="date" id="dataEvento" name="dataEvento" />
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="tema">Tema do evento</Label>
<ListaSuspensa name="tema" id="tema" itens={temas} />
</CampoDeFormulario>
</div>
<div className="acoes">
<Botao>Criar evento</Botao>
</div>
</form>
);
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!