ItSolutionStuff.com

React Textarea onChange Example | React Textarea Tutorial

By Hardik Savani • September 6, 2020
React JS

This tutorial is focused on react textarea onchange event example. i explained simply about how to use textarea in react js. you will learn react textarea onchange get value. i would like to share with you how to create a textarea in react js.

If you are new in react then you want to see how to use textarea in react app. but it's very easy to use textarea in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.

In this example, we will take simple "body" input textarea field and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.

So, let's see bellow preview and code:

Example Code:

import React, { Component } from 'react';

import { render } from 'react-dom';

class App extends Component {

constructor() {

super();

this.state = {

body: 'This is body'

};

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({body: event.target.value});

}

handleSubmit(event) {

console.log(this.state);

event.preventDefault();

}

render() {

return (

<div>

<h1>React Textarea onChange Example - ItSolutionStuff.com</h1>

<form onSubmit={this.handleSubmit}>

<strong>Body:</strong>

<textarea

value={this.state.body}

onChange={this.handleChange} />

<input type="submit" value="Submit" />

</form>

</div>

);

}

}

render(<App />, document.getElementById('root'));

Output:

{body: "This is body ghgh"}

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Change Date Format in React?

Read Now →

How to Get Current Date and Time in React?

Read Now →

How to Create Custom Component in React?

Read Now →

React - Rendering an Array of Data with map()

Read Now →

React Conditional Statements in Render Tutorial

Read Now →

React Switch Case Statement Example

Read Now →

React If Condition in Render Example

Read Now →

React Bootstrap Toast Example

Read Now →

React Bootstrap Collapse Example

Read Now →

React Bootstrap Modal Popup Example

Read Now →