How to Modify Text Area Values with React?

Sometimes, we want to modify the value of the text area with React.

In this article, we’ll look at how to modify the value of the text area with React.

Modify Textarea Values with React

To modify the value of the text area with React, we set the onChange prop to a function that calls a state setter function with e.target.value .

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [val, setVal] = useState("");

  return (
    <div>
      <textarea value={val} onChange={(e) => setVal(e.target.value)}></textarea>
    </div>
  );
}

We create the val state with the useState hook.

Then we add a textarea element that has the onChange prop set to a function that calls setValue with e.target.value to set the val state to the input value of the textarea .

Finally, we set the value prop to val to update the display of the textarea with the inputted value.

Conclusion

To modify the value of the text area with React, we set the onChange prop to a function that calls a state setter function with e.target.value .