Handle an input with React hooks

React hooks have revolutionized the way we handle state and side effects in functional components. One common use case is handling user input, such as capturing values from input fields. In this blog post, we will explore how to handle an input with React hooks.

Using the useState hook

The useState hook is a built-in hook in React that allows us to add state to functional components. We can use it to capture and update the value of an input field.

Here’s an example of how to handle an input using the useState hook:


import React, { useState } from 'react';

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

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

  return (
    
      
      Input value: {inputValue}
    
  );
}

export default InputExample;

In the above code, we start by importing the useState hook from the ‘react’ package. We then define a functional component called InputExample. Inside the component, we use the useState hook to create a state variable called inputValue and a function called setInputValue to update its value. We initialize the inputValue with an empty string.

We also define a handleChange function that is called whenever the input value changes. It updates the inputValue state variable with the new value.

Finally, we render an input field with the value set to inputValue and an onChange event handler that calls the handleChange function. We also display the current value of the input field using the inputValue state variable.

Using the useRef hook

In some cases, we might want to access the input element directly without using state. In such cases, we can use the useRef hook.

Here’s an example of how to handle an input using the useRef hook:


import React, { useRef } from 'react';

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

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

  return (
    
      
      
    
  );
}

export default InputExample;

In the above code, we import the useRef hook from the ‘react’ package. Inside the InputExample component, we create a ref using the useRef hook and assign it to the inputRef variable.

We also define a handleClick function that is called when the button is clicked. It logs the value of the input element using the inputRef.current.value.

Finally, we render an input field with the ref set to inputRef and a button that triggers the handleClick function when clicked.

Conclusion

In this blog post, we explored two ways to handle an input with React hooks. We learned how to use the useState hook to capture and update the value of an input field, as well as how to use the useRef hook to access the input element directly. Both approaches have their use cases, so choose the one that best fits your needs.

Remember to import the necessary hooks from the ‘react’ package and use them inside a functional component. Happy coding!

Handle an input with React hooks