olá!
Eu não entendi porque o professor fez comparação item.id == formData.get('temaEvento'). Se o meu item é um objeto da const temas composto por {id, nome} a comparação sempre daria false e o item não seria retornado, certo?
export function FormularioDeEvento({ temas }) {
function aoSalvarEvento(formData) {
const evento = {
capa: formData.get('capaEvento'),
tema: temas.find(function (item) {
return item.id == formData.get('temaEvento')
}),
data: new Date(formData.get('dataEvento')),
titulo: formData.get('nomeEvento'),
}
console.log(evento)
}
return (
<form className="form-evento" action={aoSalvarEvento}>
<TituloFormulario>Preencha para criar um evento</TituloFormulario>
<div className="campos">
<CampoDeFormulario>
<Label htmlFor="nomeEvento">Qual o nome do evento?</Label>
<CampoDeEntrada
type="text"
id="nomeEvento"
placeholder="Summer dev hits"
name="nomeEvento"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="capaEvento">Qual a URL da capa do evento?</Label>
<CampoDeEntrada
type="text"
id="capaEvento"
placeholder="https://exemplo.com/capa.png"
name="capaEvento"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="dataEvento">Data do evento</Label>
<CampoDeEntrada type="date" id="dataEvento" name="dataEvento" />
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="temaEvento">Tema do evento</Label>
<ListaSuspensa id="temaEvento" name="temaEvento" itens={temas} />
</CampoDeFormulario>
<div className="acoes">
<Botao type="submit">Criar evento</Botao>
</div>
</div>
</form>
)
}
<form className="form-evento" action={aoSalvarEvento}>
<TituloFormulario>Preencha para criar um evento</TituloFormulario>
<div className="campos">
<CampoDeFormulario>
<Label htmlFor="nomeEvento">Qual o nome do evento?</Label>
<CampoDeEntrada
type="text"
id="nomeEvento"
placeholder="Summer dev hits"
name="nomeEvento"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="capaEvento">Qual a URL da capa do evento?</Label>
<CampoDeEntrada
type="text"
id="capaEvento"
placeholder="https://exemplo.com/capa.png"
name="capaEvento"
/>
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="dataEvento">Data do evento</Label>
<CampoDeEntrada type="date" id="dataEvento" name="dataEvento" />
</CampoDeFormulario>
<CampoDeFormulario>
<Label htmlFor="temaEvento">Tema do evento</Label>
<ListaSuspensa id="temaEvento" name="temaEvento" itens={temas} />
</CampoDeFormulario>
<div className="acoes">
<Botao type="submit">Criar evento</Botao>
</div>
</div>
</form>
