How to Use a Multiline Text Area in ReactJS

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</h2> <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. <textarea> This is simple textarea </textarea> 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. import React, { Component } from "react"; class Textareademo extends Component { constructor() { super(); this.state = { textAreaValue: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ textAreaValue: event.target.value }); } render() { return ( <div> <label>Enter value : </label> <textarea value={this.state.textAreaValue} onChange={this.handleChange} /> </div> ); } } export default Textareademo; 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. render() { return ( <div> <label>Enter value : </label> <textarea value={this.state.textAreaValue} onChange={this.handleChange} rows={5} cols={5} /> </div> ); } 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:

      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: