How to Get the Value of an Input Field using ReactJS

ReactJS is a popular JavaScript library used for building user interfaces. When working with forms in React, you might need to retrieve the value entered by the user in an input field. In this blog post, we will explore different ways to get the value of an input field using ReactJS.

Method 1: Using State

One common approach to get the value of an input field in React is by using state. By storing the input value in the component’s state, you can easily access and manipulate it.

Here’s an example:

import React, { useState } from 'react';

function InputField() {
  const [value, setValue] = useState('');

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

  return (
    

      
      Value: {value}
    
  );
}

export default InputField;
  

In the above code snippet, we define a functional component called InputField. We use the useState hook to create a state variable value and a function setValue to update it. The handleChange function is triggered whenever the input field value changes, and it updates the state with the new value. Finally, we render the input field and display the current value below it.

Method 2: Using Refs

Another way to get the value of an input field in React is by using refs. Refs provide a way to access DOM elements directly. Here’s an example:

import React, { useRef } from 'react';

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

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

  return (
    

      
      Get Value
    
  );
}

export default InputField;
  

In the above code snippet, we create a ref using the useRef hook and assign it to the input field. When the button is clicked, the handleClick function is called, which retrieves the value of the input field using the ref’s current property. The value is then logged to the console.

Conclusion

Getting the value of an input field in React can be achieved using state or refs. Both methods have their own advantages and use cases. If you need to perform additional logic or manipulate the value, using state is recommended. On the other hand, if you just need to access the value for a specific action, using refs can be a simpler solution.

Remember to choose the method that best suits your needs and keep in mind the specific requirements of your project.