πŸŽ„ Get 20% off from our React course for the holidays! πŸŽ„

How to Get All Form Values on Submit in React

Ferenc Almasi β€’ 2022 September 13 β€’ Read time 8 min read
  • twitter
  • facebook
React

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:

Copied to clipboard! Playground
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>
    )
}

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:

Copied to clipboard!
{ email: '[email protected]', password: 'supersecret' }

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.


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:

Copied to clipboard! Playground
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>
    )
}

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.

Copied to clipboard! Playground
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>
    )
}

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.
Master React Remove ads

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.

Copied to clipboard! Playground
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>
    )
}

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.

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended