How to Get the Value From Input Field in React

Usually the first thing a real-world app needs is a way to get user's input. This is commonly done using the HTML <input> element. But a beginner React developer may struggle to get the value of an input field. Here's how to do it:

import { ChangeEvent, useState } from "react";

function Example() {
  const [inputText, setInputText] = useState("");

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    // 👇 Store the input value to local state
    setInputText(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} value={inputText} />

      {/* 👇 Use the input value from state */}
      <p>Your input: {inputText}</p>
    </div>
  );
};

1. Create a state variable where you will store the input value.
2. Create a change handler function and set the input value in state with e.target.value
3. Assign the change handler to the onChange prop on the input.
4. Pass the input value as the value prop to the input, or its value won't update.

Conclusion

This method of event handlers updating the parent component's state and the child elements using getting it as props is an example of React's uni-directional flow.