I have a very basic project with next js in this project i have a simple form . when I submit this form i put my data in form Data with append method and after that when i log my form data in console it is an empty object and i’m so wondering why this is happened
this is my code
import styles from '../styles/Home.module.css'
import {useState} from "react";
export default function Home() {
const [inputs, setInputs] = useState({
name: '',
mobile: ''
});
const changeHandler = (e) => {
setInputs(prev => {
const cloneState = {...prev};
cloneState[e.target.name] = e.target.value;
return cloneState;
});
}
const clickHandler = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('name', inputs.name);
formData.append('mobile', inputs.mobile);
console.log(formData, 'FD');
}
return (
<div className={styles.container}>
<form>
<input type="text" onChange={changeHandler} name='name'/>
<input type="text" onChange={changeHandler} name='mobile'/>
<button type='submit' onClick={clickHandler}>Submit</button>
</form>
</div>
)
}thanks all of you in advanced
>Solution :
If you log the formData object in console it will log the formData object. You need to call the ‘get’ method to get the values. If you want to get a json from a formData object use the code below.
console.log(Object.fromEntries(formData))