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>
    )
}

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

• javascript
• reactjs
• forms
• next.js
• form-data

• its working. The formData are populating. what not working exactly for u? – Arun AK Commented Apr 17, 2022 at 16:12
• i receive an empty object in my console :( – Ali Ehyaie Commented Apr 17, 2022 at 16:13

3 Answers 3

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))

The type of the instance of FormData is not a plain JS object, but its a FormData object, hence you can't log it directly into console.

To check its entries, you can do:

[...formData.entries()].forEach(e => console.log(e))

The problem related to getting values from formData. You can get data from formData using get() method, or getAll() in order to get all values with the same name inside the array. For getting all values from formData you can use for...of loop like this one.

for (let value of formData.values()) {
        console.log(value);
    }

Hope, this will help you. Thanks)