How to get input value in React
If you know how to get input value in React, you understand the fundamental logic behind how React works.
This is why this is one of the common interview questions asked when applying for a React job.
In this video tutorial I briefly go over how it all works:
When rendered as components, simple text input fields won’t allow you to type in them in React, without first wiring their value to a state object.
In this tutorial I created a text value and stored it in state using useState hook. Then this value was used as the value of the input component.
But this is not enough. React still won’t let you type a new value into the input box. You need to add a function handler for onChange event.
Inside this onChange event, receive the new value via event.target.value and assign it to the state variable. Now every time you type, the state value is updated and automatically reflect inside the input box.
This might not be straightforward at first. But this really outlines the workflow behind creating pretty much any component in React.
If you understand this, you understand how to properly wire data into React’s UI components.
