Setting rows and columns in input <textarea> in reactJS form-CodePudding

I have a ReactJS function that takes a long text string as input and uses it for further processing :

import React, { useState } from "react";
import p21logo from '../images/p21logo-002-1.png'; // with import

export default function SetFilter() {
const filter1 = {"exaltG.Ju": {"$eq": true}}
const [filter, setFilter] = useState(JSON.stringify(filter1));
 
  const handleSubmit = (e) => {
    e.preventDefault()
    const message = `data is ${filter}`;
    window.alert(message);
    window.open(`/getfilteredrecords/${filter}`);
  };
 
 return (
   <div>
       <table>
           <tr>
            <td>
            C<img src={p21logo} alt="ParasharLogo"></img>  
            </td>
            <td>
            <form onSubmit={handleSubmit}>
              <p>Set Filter :</p>
              <label>
                <input 
                  type="textarea" 
                  value={filter}
                  onChange={(e) => setFilter(e.target.value)}
                  rows={5}
                  cols={60}
                />
                
              </label>
              <br></br>
              <input type="submit" />
            </form>  
            </td>
          </tr>
      </table>
   </div>
 );
}

However, irrespective of what I set as the number of rows and columns of the textarea, what shows up is the small, single line default text field. While I can still enter a large text string in this small field, by scrolling to the right, it would be better if I could give a large area as this would obviously help the user to visually see whether the full text has been entered correctly. How should I change my code to offer a larger textarea for data entry?

CodePudding user response：

You need to use TextArea

<textarea name="Text1" cols="60" rows="5"></textarea>