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
.
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;
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.
<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>
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;
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 }
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:
You can use any of those properties with the <textarea>
form field based on your functional requirements.
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
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.
Explore these React.js courses from Pluralsight to continue learning: