How to Create Reusable Select Field in React Js

A Reusable Select field in React are custom component that encapsulates Select elements and their behavior, allowing you to easily incorporate consistent and customizable form inputs throughout your application, enhancing maintainability and code reusability.

Select Component

This code defines a React component called SelectField that creates a labeled select (dropdown) input field.

It takes four props: label (the label displayed above the select field), options (an array of objects representing selectable options), value (the currently selected value), and onChange (a callback function to handle value changes).

The component renders the label, the select input field with options generated from the options prop, and exports it as the default export for use in other parts of a React application.

File Name – SelectField

import React from 'react';

const SelectField = ({ label, options, value, onChange }) => {
  return (
    <div>
      <label>{label}</label>
      <select value={value} onChange={onChange}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default SelectField;

• Imports the React library for creating React components.
• Defines a functional React component called SelectField that takes four props: label, options, value, and onChange.
• Renders a label and a select input field wrapped in a div.
• The label displays the text provided in the label prop.
• The select input field’s value is set based on the value prop, and it triggers the onChange callback when its value changes.
• The select field’s options are generated based on the options prop using the map function, creating an <option> element for each option with a unique key, value, and display label.
• Exports the SelectField component as the default export for use in other parts of the application.

Use Reusable Select Field

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

File Name – App.js

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

const App = () => {
  const [role, setRole] = useState('');
  const [gender, setGender] = useState('');

  return (
    <div>
      <h1>Reusable Form Components Example</h1>
      <SelectField
        label="Role"
        options={[
          { label: 'Admin', value: 'admin' },
          { label: 'User', value: 'user' },
        ]}
        value={role}
        onChange={(e) => setRole(e.target.value)}
      />
      <SelectField
        label="Gender"
        options={[
          { label: 'Male', value: 'male' },
          { label: 'Female', value: 'female' },
          { label: 'Other', value: 'other' },
        ]}
        value={gender}
        onChange={(e) => setGender(e.target.value)}
      />
    </div>
  );
};

export default App;

1. Import Statements:
   • The code imports necessary libraries and components for the React application.
   • It imports React and the useState hook from the ‘react’ library.
   • It also imports a custom SelectField component from a local file.
2. Functional Component Definition (App):
   • The code defines a functional React component named App.
   • Inside this component, two state variables, role and gender, are initialized using the useState hook. These state variables will store the selected values for the “Role” and “Gender” dropdowns, respectively.
3. JSX Markup (return statement):
   • The return statement contains JSX markup, which defines the structure of the component’s user interface.
4. Dropdown Select Fields (SelectField components):
   • Two instances of the custom SelectField component are rendered.
   • The first SelectField represents the “Role” dropdown and is configured with options for “Admin” and “User.”
   • The second SelectField represents the “Gender” dropdown and is configured with options for “Male,” “Female,” and “Other.”
   • Each SelectField receives props:
     • label: This prop is used to display a label for the dropdown (“Role” or “Gender”).
     • options: An array of objects representing the options in the dropdown.
     • value: The selected value for the dropdown, which is controlled by the role and gender state variables.
     • onChange: A callback function that is triggered when the user selects an option. It updates the corresponding state variable (role or gender) with the selected value.
5. Exporting the Component:
   • The App component is exported as the default export, making it available for use in other parts of the application.