How to Use a Multiline Text Area in ReactJS
Learn how to use a multiline textarea in ReactJS for user input. Explore various methods, including HTML5 tags, React components, and handling events effectively.
Apr 4, 2020 • 6 Minute Read
Introduction
Web apps often need forms for user interactivity, and this requires us as developers to use form controls such as text input boxes, dropdowns, checkboxes, and so on.
One frequently used form control is textarea, which is used to get multi-line input from a user. It's different from a normal text input, which allows only single-line input. A good example of a use case for textarea is an address field.
In this guide, you'll learn various ways to use textarea.
Using textarea as HTML Input Type
To make a textarea in React, use the input tag. Below is a simple example of this.
import React, { Component } from "react";
class Simpletextarea extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
handleChange(event) {
console.log(event.target.value)
}
render() {
return (
<div>
<label>Enter value : </label>
<input type="textarea"
name="textValue"
onChange={this.handleChange}
/>
</div>
);
}
}
export default Simpletextarea;
Notice that textarea is used as a type with the input form control, and as soon as the user changes the value, it's used for the rendering process.
This is an old approach to using textarea with a form, but now you can also use the <textarea> tag as explained below.
Using HTML5 Tag Here in this short example, the value between the
The text area is normally the part of the form, but you can also create a generic Textarea component that is reusable across the application.
The code should look like this:
import React, { Component } from "react";
class Sharedtextarea extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<label>Enter value : </label>
<input type="textare"
name="textValue"
onChange={this.props.handleChange}
/>
</div>
);
}
}
export default Sharedtextarea;
In the above example, a new component is created called Sharedtextarea. As soon as the user changes the value of the text area, it will call the action from the parent component as props called handleChange().
Now you can access the component and its updated value like this:
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Sharedtextarea from "./Sharedtextarea";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
console.log(event.target.value);
}
render() {
return (
<div>
<Sharedtextarea
handleChange={this.handleChange}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
In the example above, the component is accessed using the name Sharedtextarea. Along with the component, an additional property is provided called handleChange.
From the handle change event, the value from the child component will be reflected.
Textarea Event Support
The textarea element can also support various types of events:
-
Window event s
-
Global event s
-
Media event s
-
Keyboard event s
-
Mouse event s
-
Drag event s
Conclusion
After going through the complete guide, you can see how the textarea can be used in React. For example, you can use input as textarea, the <textarea> tag, or create a shared textarea component.
Try these examples on your own. I hope they are helpful while you're learning.
Learn More
Explore these React.js courses from Pluralsight to continue learning:
Advance your tech skills today
Access courses on AI, cloud, data, security, and more—all led by industry experts.