Create a Material-UI Custom Select Component with React js.

Component Definition

• CustomBasicSelect is a functional component that takes several props to customize its behavior. Here’s what each prop is used for,
• id, name, title: Basic identifiers for the select input and the label.
• value: The current selected value in the dropdown.
• onChange A function to handle changes when a different option is selected.
• options: An array of objects representing the dropdown options, where each object typically has a value and a label.
• disabled: A boolean to make the dropdown read-only.
• disableUnderline: A boolean to control the underline style of the select input.
• inputProps: Additional input properties to be passed to the select input.
• errors: An object containing any validation errors.
• className: A string to apply custom CSS classes.

JSX Structure

• The label element is linked to the Select component by the htmlFor attribute using the id.
• The Select component renders a dropdown menu using Material-UI. It has various attributes like id, name, aria-label, value, onChange, etc., to control its behavior.
• options.map() is used to dynamically create MenuItem elements for each option in the options array.
• The error prop is set using Boolean(errors[name]) to handle error states.

Create an array of Object

I'm going to create a sample country list like this.

[
  { "value": "GB", "label": "United Kingdom" },
  { "value": "US", "label": "United States" },
  { "value": "AR", "label": "Argentina" },
  { "value": "AU", "label": "Australia" },
  { "value": "AT", "label": "Austria" }
  // ...
]

Add custom select in App.js.

import React, { useState } from "react";
import "./App.css";
import CustomBasicSelect from "./Custom_Component/CustomBasicSelect";
import listOfCountry from "./util/ListOfCountries.json";
import Grid from "@mui/material/Grid";
import { Box } from "@mui/material";

function App() {
  const [selectedCountry, setSelectedCountry] = useState("");

  const handleCountryChange = (event) => {
    setSelectedCountry(event.target.value);
  };

  return (
    <div className="App">
      <h1>Material-UI App</h1>
      <h2>Material-UI Custom Select</h2>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <CustomBasicSelect
              id="custom-select"
              name="customSelect"
              title="Choose Country"
              value={selectedCountry}
              onChange={handleCountryChange}
              options={listOfCountry}
              errors={{
                customSelect:
                  selectedCountry === "" ? "Please select a country" : "",
              }}
              // className="custom-select-class"
            />
          </Grid>

          <h2>
            <div style={{ background: "#81c784" }}>{selectedCountry}</div>
          </h2>
        </Grid>
      </Box>
    </div>
  );
}

export default App;

Explanation of the Code

1. Imports
   • CustomBasicSelect: A custom select component imported from another file (Custom_Component/CustomBasicSelect). This is the dropdown component that you provided earlier.
   • listOfCountry: A JSON file (ListOfCountries.json) imported from the ./util directory that contains a list of country options for the select component.
2. Function Component: App
3. State Management
   • selectedCountry: A state variable initialized to an empty string (""). It keeps track of the currently selected country in the dropdown.
   • setSelectedCountry: A function provided by useState to update the selected country state whenever a new option is selected.
4. Handler Function
   • handleCountryChange: A function that is called whenever the user selects a different country. It takes an event object as a parameter and updates the selected country state with the value of the selected option (event.target.value).
5. JSX Structure
   • Material-UI Box Component
     • Used to create a flex container (sx={{ flexGrow: 1 }}) to wrap the content.
   • Material-UI Grid Component
     • Used for layout purposes, creating a grid system with a container that has a spacing of 2 units.
     • Inside the grid, a Grid item is defined with a size of 4 (out of 12, as Material-UI grids are based on a 12-column layout by default).
   • CustomBasicSelect Component
     • The custom select component is used to display a dropdown list of countries.
     • Several props are passed to customize the component:
       • id, name, title: Identifiers and a label for the select input.
       • value: The currently selected country (selected country).
       • onChange: The handler function (handleCountryChange) to manage changes in the selected country.
       • options: The list of countries (listOfCountry) from the JSON file.
       • errors: An object that contains an error message if no country is selected.

Picture 7. Basics Select

Picture 8. See the sample country list

When you select the country fair on the onChange event, call the handleCountryChange function and update the states setSelectedCountry(event.target.value);

I add a piece of code.

<h2>
  <div style={{ background: "#81c784" }}>
    {selectedCountry}
  </div>
</h2>

When selecting, the values will be displayed.

Picture 9. You can see the selected value in the highlight

Conclusion

In this article, we have successfully built a custom select component in a React application using Material-UI. By setting up a new React environment, integrating Material-UI, and creating reusable components like CustomBasicSelect, we demonstrated how to efficiently manage form inputs and state. This approach can be extended to create more sophisticated form elements, enhancing the user experience in your React applications.