Getting textarea value in nextjs - html

Question

I try to get data from a textarea in a react functional component, I'using Reducer hook to fetch data from the form, i use reducer to get data from the dom I don't understand what I've done wrong help would be very appreciated.
import Success from "../../components/singleElements/Success"
import Error from "../../components/singleElements/Error"
import { useQueryClient, useMutation } from "react-query"
import { addOnePub, getPub } from "../../lib/helper"
import { useReducer } from "react"
export default function Insertpub(){
//I use this reducer to fetch the data
const formReducer = (state, event) => {
return {
...state,
[event.target.name]: event.target.value,
};
};
//then get the textfield changes from here
const [formData, setFormData] = useReducer(formReducer, {});
const queryClient = useQueryClient()
const addMutation = useMutation(addOnePub, {
onSuccess : () => {
queryClient.prefetchQuery('pub', getPub)
}
})
const handleSubmit = (e) => {
e.preventDefault();
if(Object.keys(formData).length == 0) return console.log("Don't have Form Data");
let {pub} = formData;
const model = {
pub
}
addMutation.mutate(model)
console.log("the data is correctly inserted")
}
if(addMutation.isLoading) return <div>Loading!</div>
if(addMutation.isError) return <Error message={addMutation.error.message}></Error>
if(addMutation.isSuccess) return <Success message={"Added Successfully"}></Success>
//When I insert a value in this text area it returns null object
return (
<form onSubmit={handleSubmit}>
<textarea
className="bg-gray-200 w-full rounded-lg shadow border p-2"
rows="5"
placeholder="Ecrivez votre publication ici"
OnChange={setFormData}
name="pub"
id="pub"
></textarea>
<div className="w-full flex flex-row flex-wrap mt-3">
<div className="w-2/3">
<button
type="submit"
className="float-right bg-indigo-400 hover:bg-indigo-300 text-white p-2 rounded-lg"
>
Publier
</button>
</div>
</div>
</form>
)
}
Normally when I submit the form it should return value populated from the reducer hook but i got anything

Answer 1

It could be because of the typo in the capitalization (case matters):
OnChange={setFormData}
Should be
onChange={setFormData}