How can I save the defaultValue of an MUI form field to Mongoose?

Question

I have a small nextjs app that uses an MUI form. The form has 2 fields, (1) a default field and (2) an email field. The email is saving fine to the db, but I have issues saving the defaultValue field to mongoose.

I've tried to remove the placeholder and even changed defaultValue to value, but nothing worked yet. I would like to save the defaultValue to mongoose. Kindly the image of the code and form below:

enter image description here enter image description here

Answer 1

That's clearly not a way to use useState my guy. First, you need to creat a useState at the start of the react component function.

"use client"
import {useState} from "react"
export default function AComponent(){
  const [fieldVal, setFieldVal] = useState("")
...
} 

You may then passing the value to the mui textfield value

...
<TextField
   ...
   value={fieldVal}
   onChange={e=>setFieldVal(e.target.value)}
   ...
/>
...

For another field you will need to declare a different state. You then can use this "fieldVal" to save to mongoose. Remember to save it after it rerenderd to get the latest state though. Hope this can help!