How to Get The Value of Input in React

React is a popular JavaScript library for building user interfaces, and handling user input is a fundamental aspect of any web application. When working with forms in React, it’s essential to know how to retrieve the value of an input element, as it allows you to access and manipulate user-submitted data.

In this article, we will explore different methods to obtain the value of an input in React, giving you the knowledge and tools to handle user input effectively.

1. Using State to Track Input Value

One of the most common approaches in React is to utilize state to store and track the value of an input field. This allows React to handle changes to the input’s value and update the user interface accordingly.

To get the value of an input using state, follow these steps:

• Create a state variable in your component to hold the input value. You can use the useState hook for this purpose.

import React, { useState } from 'react';

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

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

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

In the code above, we define the inputValue state variable and the setInputValue function to update its value. The handleChange function is triggered whenever the input value changes, updating the state accordingly.

• By binding the value prop of the input element to the inputValue state variable, we ensure that React keeps track of the value and reflects it in the user interface.

2. Accessing Input Value with Refs

Another approach to obtain the value of an input in React is by using refs. Refs provide a way to access the DOM nodes directly, allowing us to retrieve the value of an input element without relying on state.

Here’s an example of how to get the input value using refs:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    const inputValue = inputRef.current.value;
    console.log(inputValue);
  };

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

In this code snippet, we create a ref called inputRef using the useRef hook. The inputRef is then assigned to the ref prop of the input element. When the button is clicked, the handleClick function retrieves the input value using inputRef.current.value.

3. Utilizing Form Submission

If you’re working with a form and want to retrieve the input value upon submission, you can use the native form submission event in React. This method is particularly useful when you need to gather multiple input values as a group.

Consider the following example:

import React, { useState } from 'react';

function MyComponent() {
  const [formValues, setFormValues] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formValues);
  };

  const handleChange = (event) => {
    setFormValues({
      ...formValues,
      [event.target.name]: event.target.value,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="firstName" onChange={handleChange} />
      <input type="text" name="lastName" onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we create a form with two input fields: firstName and lastName. The handleSubmit function is called when the form is submitted, preventing the default form submission behavior. The handleChange function updates the formValues state object with the current input values, using the input’s name attribute as the key.

By logging the formValues object, you can access all the input values as a single entity.