How to use a multiline text area in React

React is a Javascript library used to build component-based user interfaces. React provides built-in components that allow easier, swifter, and more structured integration of functionalities in the web application. Some of the built-in components are dedicated to taking input from the user. The multiline textarea component primarily serves its functionalities as an input component. As the name implies, it spans multiple lines, which helps to get larger textual input from the user.

But, why do we need multiline text areas? We may have visited websites where the website owner wants to get detailed feedback from us. They might provide a feedback form with an input box that takes a height of 4 to 5 lines. This particular input box is an example of a multiline text area.

<textarea
  rows = {2}    // Specifies the number of visible text lines
  cols = {150}    // Specifies the width of the textarea in characters
  value = "Hello World"   // Specifies the initial value of the textarea
  placeholder = "Add your text"   // Specifies a short hint that describes the expected value of the textarea
  wrap = "soft"   // Specifies how the text in the textarea should be wrapped
  readOnly = {true}   // Specifies that the textarea is read-only, meaning the user cannot modify its content
  name = "name"   // Specifies the name of the textarea, which can be used when submitting a form
  disabled = {true}   //  Specifies that the textarea is disabled, meaning the user cannot interact with it
  minLength = {150}   // Specifies the minimum number of characters required in the textarea
  maxLength = {200}   // Specifies the maximum number of characters allowed in the textarea
/>

The code above block shows the syntax of textarea in React JS. We will explain each attribute associated with the textarea below:

rows: An integer value that tells the number of lines the textarea spans to.
cols: An integer value that defines the width of the textarea.
value: A string that inserts the text of a textarea.
placeholder: It is a string that helps users by telling them what to enter in the textarea.
wrap: A string value with off, hard, and soft as the possible values. If wrap has a value of off, then the text area's content will overflow horizontally.
readOnly: A boolean value. If the value is true, then the textarea becomes noneditable, but the user's interactivity remains in contact.
name: A string value that gets submitted along with the form's submission.
minLength: An integer value that tells the minimum number of characters that should be in the textarea.
maxLength: An integer value that tells the maximum number of characters the textarea can accommodate.