How to Get the Value From Input Field in React

When you are working with forms in React, One Common task is getting the value from the input field. In this article, We are going to explore different methods to get the value from an input field in React.

1. Using the useState Hook

1. Set up the state variable using useState hook to store the value of the input.
2. Create an event handler function this function will handle change event of the input field and update the state when new value entred by the user.
3. Add onChange attribute to the input field and assign the event handler function to it.
4. Access the value from the state variable

import React, { useState } from 'react'

const ExampleComponent = () => {
  const [inputValue, setInputValue] = useState('')

  const handleInputChange = (e) => {
    setInputValue(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(inputValue)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default ExampleComponent

2. Using Refs

In react we can create ref using the useRef hook this Refs helps us to access and manipulate DOM elements directly so using this method we can get the value from an input field.

1. Create a ref variable using the useRef hook
2. Attach the ref to the input field
3. Access the current value of the input field using the ref.current.value

Here's an example:

import React, { useRef } from 'react'

function MyForm() {
  const inputRef = useRef(null)

  const handleButtonClick = () => {
    const value = inputRef.current.value
    console.log(value)
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Get Value</button>
    </div>
  )
}

export default MyForm

3. Using Form Submission

When you are working with forms and want to get values from from an input field when the form is submited. you can follow the bellow steps.

1. Set up the state variable using useState hook to store the value of the input.
2. Create an event handler function this function will handle change event of the input field and update the state when new value entred by the user.
3. Add onSubmit attribute to the form and assign the event handler function to it.
4. Access the value from of the input field in the onSubmit event handler.

import React, { useState } from 'react'

function MyForm() {
  const [inputValue, setInputValue] = useState('')

  const handleFormSubmit = (event) => {
    event.preventDefault() // 👈️ prevent page refresh
    console.log(inputValue)
  }

  const handleInputChange = (event) => {
    setInputValue(event.target.value)
  }

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default MyForm