Can't call onsubmit from form in nextjs 13

Question

i have a simple nextJS 13 app that need to post some data to an external api (think of it as a contact form) but whatever i did i was not able to call the handleSubmit method.

    My Node Version : v16.13.1
    "autoprefixer": "10.4.16",
    "eslint": "8.49.0",
    "eslint-config-next": "13.5.2",
    "next": "^13.5.4",
    "postcss": "8.4.30",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "3.3.3"

"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"

export default function CreateForm() {
    
    const handleSubmit = async (e) => {
        e.preventDefault();
        const newItem = { title }

        const res = await fetch('http://localhost:4000/tickets', {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(newItem)
        })
        console.log('submit')
    }

    return (
        <form onSubmit={handleSubmit} className="w-1/2">
            <label>
                <span>Title:</span>
                <input
                    required
                    type="text"
                    name="title"
                    onChange={(e) => setTitle(e.target.value)}
                    value={title}
                />
            </label>
            <button
                type="submit"
            >
                sendit
            </button>
        </form>
    )
}

Here is a list of things i tried to do:

removed async methods

tried to call an inline method inside onsubmit to see results

deleted .next folder

I'm expecting to call the post method from api successfully to insert to db.

Answer 1

I believe the issue is with this bit

 const newItem = { title }

nowhere is title referenced, so its failing here and not in your api call.

You need to use declare your title above in a state variable like this

const [title, setTitle] = useState("");