Hey everyone, I'm new to react.js and next.js. I attempted to copy some data from a form and display it in the console, but using e.preventDefault() is preventing me from submitting my form. Is there a more effective way to achieve what I'm aiming for? I opted for a simpler approach based on my understanding.
import Header from '../components/header'
import Navbar from '../components/navbar'
import React, { useState } from 'react'
export default function Home({data}) {
const [form, setForm] = useState({})
const saveMovie = e =>{
e.preventDefault()
console.log("Why can't I see you?")
console.log(form) // also not showing
}
return (
<div>
{ /* header */ }
<Header />
{/* Navbar */}
<Navbar />
{/*List of movies */}
<form className="form p-10 md:w-2/3 lg:w-1/2 mx-auto rounded" onSubmit={ saveMovie }>
<div className="shadow">
<div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
<label className="w-20 text-right mr-8 p-4 text-white">Title</label>
<input onChange={e=> setForm({...form, title: e.target.value})} type="text" name="title" id="title" placeholder="Enter movie title" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
</div>
<div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
<label className="w-20 text-right p-4 mr-8 text-white">Year</label>
<input onChange={e=> setForm({...form, year: +e.target.value})} type="text" name="year" id="year" placeholder="Enter the year" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
</div>
<div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
<label className="w-20 text-right mr-8 p-4 text-white">slug</label>
<input onChange={e=> setForm({...form, slug: e.target.value})} type="text" name="slug" id="slug" placeholder="Enter the slug here" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
</div>
<div className="flex items-center bg-regalblue rounded-t-lg border-blue-500 border">
<label className="w-20 text-right mr-8 p-4 text-white">Description</label>
<textarea onChange={e=> setForm({...form, description: e.target.value})} type="textarea" name="description" id="description" placeholder="Enter the description" className="flex-1 p-4 pl-0 bg-transparent placeholder-gray-600 outline-none text-white overflow-ellipsis overflow-hidden"/>
</div>
</div>
<button type="submit" className="bg-regalblue hover:bg-gray-900 block w-full rounded-md border py-4 text-white font-bold shadow">Submit Form </button>
</form>
</div>
)
}