How to Create Reusable Textarea Field in React Js

by

Reusable Textarea fields in React are custom components that encapsulate textarea elements and their behavior, allowing you to easily incorporate consistent and customizable form inputs throughout your application, enhancing maintainability and code reusability.

Textarea Component

This code defines a reusable React component called TextareaField, which can be used to render a labeled textarea input field. The label, current value, and an onChange callback function are passed as props to customize the behavior and appearance of the component when used in different parts of a React application

File Name – TextareaField.js

import React from 'react';

const TextareaField = ({ label, value, onChange }) => {
  return (
    <div>
      <label>{label}</label>
      <textarea value={value} onChange={onChange}></textarea>
    </div>
  );
};

export default TextareaField;
  • The code imports the React library to create React components.
  • Define the TextareaField component: This is a functional React component that takes three props: label, value, and onChange.
  • The component’s JSX code renders a div containing a label element for displaying the label text and a textarea element for user input.
  • value and onChange Props: The textarea element’s value and onChange props are set to the values passed in as props to the TextareaField component. This allows for controlled input, where the value reflects the current content of the text and the onChange function is called when the textarea content changes.
  • The TextareaField component is exported as the default export of the module so it can be used in other parts of a React application.

Use Reusable Textare Field Component

You have created a Textarea field component, you can reuse it multiple times by passing its required props – label, value & onChange.

This code defines a React functional component (App) that renders a simple form-like UI with two text areas for entering a “Description” and a “Short Description.” It uses the useState hook to manage the state of these text areas and updates the state as the user types. This code assumes that the TextareaField component is defined elsewhere in your codebase and is used to encapsulate the textarea input fields.

File Name – App.js

import React, { useState } from 'react';
import TextareaField from './TextareaField';

const App = () => {
  const [description, setDescription] = useState('');
  const [shortDescription, setShortDescription] = useState('');

  return (
    <div>
      <h1>Reusable Form Components Example</h1>

      {/* Description */}
      <TextareaField
        label="Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />

      {/* Short Description */}
      <TextareaField
        label="Short Description"
        value={shortDescription}
        onChange={(e) => setShortDescription(e.target.value)}
      />
    </div>
  );
};

export default App;
  • Imports React and the useState hook, which allows for managing component state.
  • Imports a custom TextareaField component from an external file.
  • Defines the App functional component.
  • Uses the useState hook to create state variables for description and shortDescription.
  • Returns JSX code representing the user interface, including a title and two TextareaField components for “Description” and “Short Description.” These components receive props for their labels, values, and onChange handlers.
  • Exports the App component for use in other parts of the application.