Basic issue with ReactJS setting state in functional component - reactjs

Question

Hi I am new to React and I just can't wrap my head around some basic things.
One of these things is the following.
Why does the state of itemData change when calling the function with onChange on the textarea element as in this example:
import React, { useEffect, useState } from "react";
function Createitem() {
const [itemData, setitemData] = useState([]);
const handleitemData = (e) => {
setitemData({
itemTime: Date.now(),
itemText: e.target.value,
});
};
useEffect(() => {
console.log("item", itemData);
}, [itemData]);
return (
<div className="itemBox">
<div>
<form>
<textarea
onChange={handleitemData}
placeholder="What you have in mind ..."
></textarea>
<button type="submit">item</button>
</form>
</div>
</div>
);
}
export default Createitem;
But not when calling the function with onSubmit on the form element as in this example:
import React, { useEffect, useState } from "react";
function Createitem() {
const [itemData, setitemData] = useState([]);
const handleitemData = (e) => {
setitemData({
itemTime: Date.now(),
itemText: e.target.value,
});
};
useEffect(() => {
console.log("item", itemData);
}, [itemData]);
return (
<div className="itemBox">
<div>
<form onSubmit={handleitemData}>
<textarea placeholder="What you have in mind ..."></textarea>
<button type="submit">item</button>
</form>
</div>
</div>
);
}
export default Createitem;
I know the React way is if that does not work try something else but I am trying to actually understand what is going on.
I apreciate your response.

Answer 1

You must prevent the default behavior of the browser on submit:
import React, { useEffect, useState } from "react";
function Createitem() {
const [itemData, setitemData] = useState([]);
const handleitemData = (e) => {
//The line below is necessary
e.preventDefault()
setitemData({
itemTime: Date.now(),
itemText: e.target.value,
});
};
useEffect(() => {
console.log("item", itemData);
}, [itemData]);
return (
<div className="itemBox">
<div>
<form onSubmit={handleitemData}>
<textarea placeholder="What you have in mind ..."></textarea>
<button type="submit">item</button>
</form>
</div>
</div>
);
}
export default Createitem;
attached is a sandbox to see it in action https://codesandbox.io/s/infallible-lederberg-3oj1w?file=/src/App.js:0-630