How To Get Input Value In React
#react #reactjs #change #text #input #value #set #get
I make free coding tutorials. Get updates when new tutorial is published:
Sign up for my YouTube channel to receive short daily coding tutorials.
Getting text input in React is a very common usecase.
It’s done in todo lists, forms, entering username and passwords, etc.
Changing input dynamically when user types new characters is often one of the first questions asked on technical interviews.
(Other than how to delete rows dynamically in a React table.)
This is because changing input value requires knowledge of React fundamentals. More specifically useState hook and onChange events. In React nothing is the same as in vanilla JavaScript. But once you get how it works you will be hooked (no pun intended.)
This Getting Input Value tutorial is based on following YouTube video:
How to get input value in React (video tutorial) / get input value in react
In React you can’t use global or loose component variables (defined with var, let or const keywords directly inside component’s contructor, without useState hook) if your goal is to wire them into dynamically updated elements in the app’s view.
This includes HTML’s text input element (textarea is another example.)
Instead, you will want to first create a state variable using useState hook. This is the value that will change in text input. Any time you want to get it in React, simply output its value.
However, in order to actually update, modify or change it physically in the input field, you will need to override input field’s onChange event, grab the value from the event, and update state variable with it.
The setup is to create onChange event handler to get event.target.value text input value, and only then set it to state value (using setVal setter function, see below…)
Your function will execute whenever text in the input field changes.
Here’s source code for getting the value of a changing input component:
import { useState } from 'react'function App() { const [val, setVal] = useState("Hello there") // Get input value on click
const click = color => {
alert(val)
} /* This is where we actually
change (set) value of the input box */
const change = event => {
setVal(event.target.value)
} /* Display clickable
button */
return (<div className = "App">
<input onChange = {change} value = {val} />
<button onClick = {click}>Get Input Value</button>
</div>)
}export default App;
This is the basic workflow for adding state values to components in React.
Before changing, setting and getting text field value, just wire it as shown in this example.
Getting input value in react means simply getting the state value created earlier with useState hook.
Image from this tutorial:
