How to Get All Form Values on Submit in React

Ferenc Almasi • 2022 September 13 • 📖 8 min read

To get all form values upon form submission in React, you need to attach an onChange event handler to your input field and store their values in a state object using a setState hook. Take a look at the following example:

import { useState } from 'react'

export default function App() {
    const [data, setData] = useState({})

    const updateData = e => {
        setData({
            ...data,
            [e.target.name]: e.target.value
        })
    }

    const submit = e => {
        e.preventDefault()
        console.log(data)
    }

    return (
        <form onSubmit={submit}>
            <input
                name="email"
                type="email"
                onChange={updateData}
            />
            <input
                name="password"
                type="password"
                onChange={updateData}
             />
            <button>Submit</button>
        </form>
    )
}

Copied to clipboard!

We have one useState hook that will store all form values. This is updated with an onChange handler on the inputs that sets the object to the existing values plus sets a key based on the name of the input field.

Make sure you call e.preventDefault to prevent a page refresh on form submit.

This will return the data in an object where the key corresponds to the name of the input, and the value to its value, just like this:

{ email: '[email protected]', password: 'supersecret' }

Copied to clipboard!

This approach makes it very flexible to scale your form, as you only need to attach the onChange handler on new inputs and the form values will be added automatically to your state.

Looking to improve your skills? Check out our interactive course to master React from start to finish.

Using useState

A more verbose approach is to use useState for individual fields. In this approach, you basically create a useState for each individual field and use an onChange event handler on them to set the value to the current target. In terms of code, this is how it changes our component:

import { useState } from 'react'

export default function App() {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const submit = e => {
        e.preventDefault()
        console.log(email, password)
    }

    return (
        <form onSubmit={submit}>
            <input
                name="email"
                type="email"
                onChange={event => setEmail(event.target.value)}
                value={email}
            />
            <input
                name="password"
                type="password"
                value={password}
                onChange={event => setPassword(event.target.value)}
            />
            <button>Submit</button>
        </form>
    )
}

Copied to clipboard!

We can basically grab the useState fields inside the submit function one by one. Note that this requires you to manually set up a new useState for each new field, and also update the appropriate field in the onChange handler.

Using Refs

We could also use refs by using the useRef hook. This approach is very similar to using useState, but instead of setting the state to a value, we grab the DOM element instead, and we can get the value from the DOM node.

import { useRef } from 'react'

export default function App() {
    const email = useRef()
    const password = useRef()

    const submit = e => {
        e.preventDefault()
        console.log(email.current.value, password.current.value)
    }

    return (
        <form onSubmit={submit}>
            <input
                name="email"
                type="email"
                ref={email}
            />
            <input
                name="password"
                type="password"
                ref={password}
            />
            <button>Submit</button>
        </form>
    )
}

Copied to clipboard!

Again, this approach is less flexible than the very first example, as we need to add a new ref for each field. However, there is no need for an onChange handler as we can store the correct reference using the custom ref prop on the input fields.

Also note that in order to grab the correct value, you will need to reference current.value, instead of the ref itself.

Looking to improve your skills? Check out our interactive course to master React from start to finish.

Using event.target

Lastly, we can use event.target on the form itself. This approach is probably the simplest among all, as we don't need to use any hooks. However, with this approach, we don't have access to all form values outside of the function, unless we build a state object inside the function, and pass it to a variable that is defined outside of it.

export default function App() {
    const submit = e => {
        e.preventDefault()
        console.log(e.target.email.value, e.target.password.value)
    }

    return (
        <form onSubmit={submit}>
            <input
                name="email"
                type="email"
            />
            <input
                name="password"
                type="password"
            />
            <button>Submit</button>
        </form>
    )
}

Copied to clipboard!

Also, the way you can grab the input values changes a bit differently. You will be able to access all of them under event.target[name].value, meaning the object will be the name property of your input.

⚛️ React

Did you find this page helpful?

📚 More Webtips