Category Subcategory Dropdown in React js

In this tutorial, you will learn how to create dynamic category and subcategory dependent dropdowns with options in react js application.

How to Create Dependent Category Subcategory Dropdown in React js

Here are steps to create dependent category and subcategory dropdown with options:

• Step 1: Create the Category Dropdown Component
• Step 2: Create the Subcategory Dropdown Component
• Step 3: Create the Parent Component

Step 1: Create the Category Dropdown Component

The first step is to create the category dropdown component, and add list of categories into it that the user can choose:

import React, { useState } from 'react';

const CategoryDropdown = (props) => {
  const [selectedCategory, setSelectedCategory] = useState("");

  const handleCategoryChange = (event) => {
    setSelectedCategory(event.target.value);
    props.onCategoryChange(event.target.value);
  };

  return (
    <div>
      <label htmlFor="category">Select a category:</label>
      <select id="category" value={selectedCategory} onChange={handleCategoryChange}>
        <option value="">-- Select a category --</option>
        <option value="category1">Category 1</option>
        <option value="category2">Category 2</option>
        <option value="category3">Category 3</option>
      </select>
    </div>
  );
};

export default CategoryDropdown;

Step 2: Create the Subcategory Dropdown Component

Create the subcategory dropdown component, and add list of subcategories based on the selected category:

import React, { useState, useEffect } from 'react';

const SubcategoryDropdown = (props) => {
  const [selectedSubcategory, setSelectedSubcategory] = useState("");
  const [subcategories, setSubcategories] = useState([]);

  useEffect(() => {
    // simulate an API call to get subcategories based on the selected category
    const getSubcategories = async () => {
      const subcategories = await fetch(`/api/subcategories?category=${props.category}`)
        .then((response) => response.json());
      setSubcategories(subcategories);
    };
    getSubcategories();
  }, [props.category]);

  const handleSubcategoryChange = (event) => {
    setSelectedSubcategory(event.target.value);
    props.onSubcategoryChange(event.target.value);
  };

  return (
    <div>
      <label htmlFor="subcategory">Select a subcategory:</label>
      <select id="subcategory" value={selectedSubcategory} onChange={handleSubcategoryChange}>
        <option value="">-- Select a subcategory --</option>
        {subcategories.map((subcategory) => (
          <option key={subcategory.id} value={subcategory.id}>
            {subcategory.name}
          </option>
        ))}
      </select>
    </div>
  );
};

export default SubcategoryDropdown;

Step 3: Create the Parent Component

Finally, Create the parent component, and import category and subcategory dropdown components in it:

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

const CategorySubcategoryDropdown = () => {
  const [selectedCategory, setSelectedCategory] = useState("");
  const [selectedSubcategory, setSelectedSubcategory] = useState("");

  const handleCategoryChange = (category) => {
    setSelectedCategory(category);
    setSelectedSubcategory("");
  };

  const handleSubcategoryChange = (subcategory) => {
    setSelectedSubcategory(subcategory);
  };

  return (
    <div>
      <CategoryDropdown onCategoryChange={handleCategoryChange} />
      {selectedCategory && (
        <SubcategoryDropdown
          category={selectedCategory}
          onSubcategoryChange={handleSubcategoryChange}
        />
      )}
      {selectedSubcategory && (
        <p>You have selected subcategory {selectedSubcategory}.</p>
      )}
    </div>
  );
};

export default CategorySubcategoryDropdown;

Conclusion

In this tutorial, you have explored how to implement category subcategory dependent dropdowns in React.

Recommended React JS Tutorials