Modify the value of a Textarea using onChange in React

avatar

Borislav Hadzhiev

Last updated: Apr 20, 2022

banner

Check out my new book

Modify the value of a Textarea using onChange in React #

To modify the value of a textarea using onChange in React:

  1. Add an onChange prop to the textarea setting it to a function.
  2. Store the value of the textarea in the state via the useState hook.
  3. Update the state variable every time the user types into the textarea.
App.js
import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(''); const handleMessageChange = event => { // 👇️ update 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.

react get value of textarea

We can access the value of the textarea element on the event object as event.target.value.

The 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.

An alternative you might see in React is to use an uncontrolled field via a ref.

App.js
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;

get textarea value ref

Every time you click on the button, the value of the textarea will be logged to the console.

Notice that we didn't use the onChange prop on the textarea element. With uncontrolled fields, we don't track the field's value on every keystroke, but rather access it when we need it.

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.

Notice that we have to access the 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.

The 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.

Use the search field on my Home Page to filter through my more than 3,000 articles.