{"id":2009,"date":"2024-09-06T12:00:00","date_gmt":"2024-09-06T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/react-how-to-filter-select-list-by-another-select-list-in-react\/"},"modified":"2026-07-05T03:26:55","modified_gmt":"2026-07-05T01:26:55","slug":"react-how-to-filter-select-list-by-another-select-list-in-react","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/react-how-to-filter-select-list-by-another-select-list-in-react\/","title":{"rendered":"React \u2013 How to Filter Select list by Another Select list in React"},"content":{"rendered":"

In this tutorial, I will show you how to filter a Dropdownlist based on another Dropdownlist in React. We would use the example of Product, Category and SubCategory to demonstrate this.<\/p>\n

We would cover the following six steps<\/p>\n

    \n
  1. Define\u00a0 the States<\/a><\/li>\n
  2. Create the useEffect Hook to Fetch the Categories<\/a><\/li>\n
  3. Create the useEffect Hook to Fetch the SubCategories<\/a><\/li>\n
  4. Write the Categories <Select> and Handler<\/a><\/li>\n
  5. Write the SubCategories <Select> and Handler<\/a><\/li>\n
  6. Add Some Styling<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Create the States<\/strong><\/h4>\n

    We would need states to hold the total categories list(categories, the complete subcategory list\u00a0 (allSubcategories) and the filtered sub-category list (filteredSubCategories)<\/p>\n

    These are defined as shown below:<\/p>\n

    const<\/span> [categories, setCategories] =<\/span> useState([]);\r\nconst<\/span> [allSubCategories, setAllSubCategories] =<\/span> useState([]); \r\nconst<\/span> [filteredSubCategories, setFilteredSubCategories] =<\/span> useState([]); \r\n<\/pre>\n
     <\/p>\n
    Also update the newProduct<\/em><\/strong> state to include categoryid<\/em> and subcategoryid<\/em>. This is shown below:<\/p>\n
    const<\/span> [newProduct, setNewProduct] =<\/span> useState({\r\n  title:<\/span> ''<\/span>,\r\n  summary:<\/span> ''<\/span>,\r\n  content:<\/span> ''<\/span>,\r\n  categoryid:<\/span> ''<\/span>,\r\n  subcategoryid:<\/span> ''<\/span>,\r\n  created_at:<\/span> new<\/span> Date<\/span>().toISOString()  \/\/ Set current datetime<\/span>\r\n})\r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    2. Create the useEffect Hook to Fetch Categories<\/strong><\/h4>\n
    We use the effect hook to load up the Categories when the application starts up.<\/p>\n
    useEffect(() =><\/span> {\r\n    axios.get('http:\/\/localhost:8081\/categories'<\/span>).then((response) =><\/span> {\r\n      setCategories(response.data)\r\n  })\r\n  .catch<\/span> ((error) =><\/span>  {\r\n      console.error('Error fetching categories:'<\/span>, error);\r\n  });\r\n}, []);\r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    3. Create the useEffect Hook to Fetch SubCategories<\/strong><\/h4>\n
    We also want to load up the subCategories when the application starts up.<\/p>\n
    useEffect(() =><\/span> {\r\n  axios.get('http:\/\/localhost:8081\/subCategories'<\/span>).then((response) =><\/span> {\r\n      setAllSubCategories(response.data);\r\n    })\r\n    .catch<\/span>((error) =><\/span> {\r\n      console.log('Error occurred fetching subcategories'<\/span>, error);\r\n    })\r\n}, []);\r\n<\/pre>\n
     <\/p>\n
    Update the Table: At this point you can update the table to include category and subcategory columns<\/p>\n
     <\/p>\n
    4. Write the Categories Select and Handler<\/strong><\/h4>\n
    We load the categories into the <select> for categories. We also set the value to newProduct.categoryid. Also not the the default selected item is the text “Choose..” whose value defaults to empty string.<\/p>\n
    <select<\/span> \r\n    id=<\/span>\"categoryid\"<\/span> onChange=<\/span>{handleCategoryChange}<\/span> \r\n    value=<\/span>{newProduct.categoryid}<\/span> ><\/span>\r\n      <option<\/span> ><\/span>Choose...<\/option><\/span>\r\n      {categories.filter(c => c.title != null).map(category => (\r\n        <option<\/span> key=<\/span>{category.id}<\/span> value=<\/span>{category.id}<\/span>><\/span>\r\n          {category.title}\r\n        <\/option><\/span>\r\n      ))}\r\n<\/select><\/span>\r\n<\/pre>\n
     <\/p>\n
    Write the event handler (handleCategoryChange)<\/strong>: When the category is selected we do the following<\/p>\n
      \n
    • obtain the value of the category that was selected<\/li>\n
    • update the categoryid of the newProduct<\/li>\n
    • filter the subCategories base on the categoryid\u00a0<\/li>\n<\/ul>\n
      const<\/span> handleCategoryChange =<\/span> (event) =><\/span> { \r\n  const<\/span> selectedCategoryId =<\/span> event.target.value; \r\n  setNewProduct({ \r\n      ...newProduct, \r\n      categoryid:<\/span> selectedCategoryId, \r\n      subcategoryid:<\/span> ''<\/span> \/\/ Reset subcategory when category changes <\/span>\r\n  });\r\n    \/\/ Filter the subcategories based on the selected category<\/span>\r\n    const<\/span> filteredSubCategories =<\/span> allSubCategories.filter(\r\n      (subCategory) =><\/span> subCategory.categoryid ===<\/span> Number<\/span>(selectedCategoryId)\r\n    );\r\n    setFilteredSubCategories(filteredSubCategories); \/\/ Update the filtered subcategories<\/span>\r\n} \r\n<\/pre>\n
       <\/p>\n
       <\/p>\n
      5. Write the SubCategories Select and Handler<\/strong><\/h4>\n
      <select<\/span>\r\n  id=<\/span>\"subcategoryid\"<\/span> value=<\/span>{newProduct.subcategoryid}<\/span> \r\n  onChange=<\/span>{handleSubCategoryChange}<\/span>><\/span>\r\n  <option><\/span>Choose...<\/option><\/span>\r\n  {filteredSubCategories.map(subCategory => (\r\n    <option<\/span> key=<\/span>{subCategory.id}<\/span> value=<\/span>{subCategory.id}<\/span>><\/span>\r\n      {subCategory.description}\r\n    <\/option><\/span>\r\n  ))}\r\n<\/select><\/span>\r\n<\/pre>\n
       <\/p>\n
      In the handler for subCategories select, we simply obtain the selected sub-categoryid and use it to update the subcategoryid field of the newProduct<\/p>\n
      const<\/span> handleSubCategoryChange =<\/span> (event) =><\/span> {\r\n  const<\/span> selectedSubCategoryId =<\/span> event.target.value;\r\n  setNewProduct({\r\n    ...newProduct,\r\n    subcategoryid:<\/span> selectedSubCategoryId\r\n  });\r\n};\r\n<\/pre>\n
       <\/p>\n
       <\/p>\n
      6. Add Some Styling to the Select\u00a0<\/strong><\/h4>\n
      We add some style to the <select> using the sx prop<\/p>\n
        style<\/span>=<\/span>{{\r\n    width<\/span>:<\/span> '100%'<\/span>,<\/span> \/\/<\/span> Makes it full width<\/span>\r\n    padding<\/span>:<\/span> '8px'<\/span>,<\/span> \/\/<\/span> Adds padding<\/span> for better UI\r\n    borderRadius:<\/span> '4px'<\/span>,<\/span> \/\/<\/span> Adds rounded corners\r\n    border<\/span>:<\/span> '1px solid #ccc'<\/span>,<\/span> \/\/<\/span> Adds a border<\/span>\r\n    marginBottom:<\/span> '16px'<\/span>,<\/span> \/\/<\/span> Adds margin<\/span> at the bottom<\/span>\r\n    fontSize:<\/span> '16px'<\/span>,<\/span> \/\/<\/span> Sets a readable font<\/span> size<\/span>\r\n  }}\r\n<\/pre>\n
       <\/p>\n
      Now you can start the application and enjoy!!<\/p>\n","protected":false},"excerpt":{"rendered":"
      In this tutorial, I will show you how to filter a Dropdownlist based on another Dropdownlist in React. We would use the example of Product, … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2009","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=2009"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"predecessor-version":[{"id":2177,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2009\/revisions\/2177"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}