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:
- Create a state variable where you will store the input value.
- Create a change handler function and set the input value in state with
- Assign the change handler to the
onChangeprop on the input.
- Pass the input value as the
valueprop to the input, or its value won't update.
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.
Note: the input value will be string even for inputs with
type="number"so you may need to convert them to their respective types with