Author avatar

Gaurav Singhal

How to Use a Multiline Text Area in ReactJS

Gaurav Singhal

  • Apr 4, 2020
  • 6 Min read
  • 198,723 Views
  • Apr 4, 2020
  • 6 Min read
  • 198,723 Views
Web Development
Front End Web Development
Client-side Framework
React
Introduction

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.

1import React, { Component } from "react";
2
3class Simpletextarea extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9  }
10
11  handleChange(event) {
12    console.log(event.target.value)
13  }
14
15  render() {
16    return (
17      <div>
18        <label>Enter value : </label>
19        <input type="textarea" 
20          name="textValue"
21          onChange={this.handleChange}
22        />
23      </div>
24    );
25  }
26}
27
28export default Simpletextarea;
jsx

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 <textarea> Tag

<textarea> is the official tag in HTML5 to define a multi-line text input control.

A great advantages of using <textarea> is that it provides multi-line input values so that all values can be completely visible to the user.

Most of the time, <textarea> can be used to add the user’s primary and secondary addresses so that they can be completely visible to the user.

Let’s look at an example using <textarea> in ReactJs.

1<textarea>
2  This is simple textarea
3</textarea>
jsx

Here in this short example, the value between the <textarea> tags defines the value of the input, so when we run this example, it takes the string as a value by default.

1import React, { Component } from "react";
2
3class Textareademo extends Component {
4  constructor() {
5    super();
6    this.state = {
7      textAreaValue: ""
8    };
9    this.handleChange = this.handleChange.bind(this);
10  }
11
12  handleChange(event) {
13    this.setState({ textAreaValue: event.target.value });
14  }
15
16  render() {
17    return (
18      <div>
19        <label>Enter value : </label>
20        <textarea
21          value={this.state.textAreaValue}
22          onChange={this.handleChange}
23        />
24      </div>
25    );
26  }
27}
28
29export default Textareademo;
jsx

In the example above, the <textarea> tag has been used. Notice the number of input lines is more than 1, which means the value can be still visible to the user while typing.

Increase the number of visible lines for the user by using additional properties, as explained below.

1render() {
2    return (
3      <div>
4        <label>Enter value : </label>
5        <textarea
6          value={this.state.textAreaValue}
7          onChange={this.handleChange}
8          rows={5}
9          cols={5}
10        />
11      </div>
12    );
13  }
jsx

Two additional properties, rows and columns, define how many rows and columns can be created for the specific text area.

<Textarea> has tons of various properties available to use:

  • Rows
  • Cols
  • Required
  • Wrap
  • Disabled
  • Placeholder
  • MaxLength
  • Name
  • Read-only

You can use any of those properties with the <textarea> form field based on your functional requirements.

Using textarea as a Shared Component

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:

1import React, { Component } from "react";
2
3class Sharedtextarea extends Component {
4  constructor() {
5    super();
6    this.state = {
7      name: "React"
8    };
9  }
10
11  render() {
12    return (
13      <div>
14        <label>Enter value : </label>
15        <input type="textare" 
16          name="textValue"
17          onChange={this.props.handleChange}
18        />
19      </div>
20    );
21  }
22}
23
24export default Sharedtextarea;
jsx

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:

1import React, { Component } from "react";
2import { render } from "react-dom";
3import Hello from "./Hello";
4import "./style.css";
5import Sharedtextarea from "./Sharedtextarea";
6
7class App extends Component {
8  constructor() {
9    super();
10    this.state = {
11      name: "React"
12    };
13    this.handleChange = this.handleChange.bind(this);
14  }
15
16  handleChange(event) {
17    console.log(event.target.value);
18  }
19
20  render() {
21    return (
22      <div>
23        <Sharedtextarea 
24          handleChange={this.handleChange} 
25        />
26      </div>
27    );
28  }
29}
30
31render(<App />, document.getElementById("root"));
jsx

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:

LEARN MORE