How to get the value of a Textarea in React

Get the value of a Textarea in React #

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.

Copied!
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.

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.

Copied!
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.

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.

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.