Borislav Hadzhiev
Wed Apr 20 2022·2 min read
Photo by Ali Pazani
To get the value of a textarea in React, set the onChange
prop on the
textarea field and access its value as event.target.value
or use a ref for an
uncontrolled textarea element and access its value as ref.current.value
.
import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(''); const handleMessageChange = event => { // 👇️ access textarea value setMessage(event.target.value); console.log(event.target.value); }; return ( <div> <label htmlFor="message">My Textarea</label> <textarea id="message" name="message" value={message} onChange={handleMessageChange} /> </div> ); }; export default App;
We used the useState hook to store the value of the textarea element in the component's state.
We passed a function to the onChange
prop of the textarea, so every time the
user types into the field, the handleMessageChange
function gets invoked.
We can access the value of the textarea element on the event object as
event.target.value
.
target
property on the event is a reference to the textarea element.After the value of the textarea has been set, you can access it using the
message
state variable.
If you use an uncontrolled textarea field with refs, access its value via
ref.current.value
.
import {useRef} from 'react'; const App = () => { const ref = useRef(null); const handleClick = event => { // 👇️ access textarea value console.log(ref.current.value); }; return ( <div> <label htmlFor="message">My Textarea</label> <textarea ref={ref} id="message" name="message" /> <button onClick={handleClick}>Click</button> </div> ); }; export default App;
Every time you click on the button, the value of the textarea will be logged to the console.
The useRef() hook can be
passed an initial value as an argument. The hook returns a mutable ref object
whose .current
property is initialized to the passed argument.
current
property on the ref object to get access to the textarea element on which we set the ref
prop.When we pass a ref prop to an element, e.g. <textarea ref={myRef} />
, React
sets the .current
property of the ref object to the corresponding DOM node.
useRef
hook creates a plain JavaScript object, but gives you the same ref object on every render. In other words, it's pretty much a memoized object value with a .current
property.You can access any attribute on the textarea element via ref.current
. If you
log the current
property on the ref
object, it's simply a reference to the
textarea
element.