Why are the Dynamic Options not loading for the material-react tailwind component

Issue

I have a subcategory select menu that should load its options based on the selection of the category select value. Both of these inputs are using the material-tailwind/react library's Select and Option components. I've tried two methods: dynamically changing the values and using state management. It might be a library issue, but i need to be sure my code is correct so any assistance will be great!

The code for each and error/output is below:

Method 1: Dynamic Changes:

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

<Select label="Select Subcategory" value="">
  {formikProps.values.category !== "" &&
    categories
      .find((cat) => cat.category === formikProps.values.category)
      ?.subcategory.map((option) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
</Select>;

// Error:
TypeError: Cannot read properties of null (reading 'props')
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26581:27
    at http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:737:25
    at mapIntoArray (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:660:31)
    at Object.mapChildren [as map] (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:736:11)
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26580:116
    at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:12171:26)
    at updateForwardRef (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:14327:28)
    at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:15934:22)
    at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19749:22)
    at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19194:20)

Method 2: Using state management

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

const [category, setCategory] = useState<string[]>([]);

<div>
  <div>
    <Select
      label="Select Category"
      onChange={(e) => {
        setCategory(
          categories.find((item) => item.category === e)?.subcategory ?? []
        );
      }}
    >
      {categories.map((category) => (
        <Option key={category.category} value={category.category.toLowerCase()}>
          {category.category}
        </Option>
      ))}
    </Select>
  </div>
  <div>
    <Select label="Select Subcategory" value="">
      {category.map((option: string) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
    </Select>
  </div>
</div>;

There is no error here, but the options are not loading.

I have a subcategory select menu that should load its options based on the selection of the category select value. Both of these inputs are using the material-tailwind/react library's Select and Option components. I've tried two methods: dynamically changing the values and using state management. It might be a library issue, but i need to be sure my code is correct so any assistance will be great!

The code for each and error/output is below:

Method 1: Dynamic Changes:

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

<Select label="Select Subcategory" value="">
  {formikProps.values.category !== "" &&
    categories
      .find((cat) => cat.category === formikProps.values.category)
      ?.subcategory.map((option) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
</Select>;

// Error:
TypeError: Cannot read properties of null (reading 'props')
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26581:27
    at http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:737:25
    at mapIntoArray (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:660:31)
    at Object.mapChildren [as map] (http://localhost:3000/node_modules/.vite/deps/chunk-ZGRSIX2Q.js?v=0d558af5:736:11)
    at http://localhost:3000/node_modules/.vite/deps/@material-tailwind_react.js?v=0d558af5:26580:116
    at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:12171:26)
    at updateForwardRef (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:14327:28)
    at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:15934:22)
    at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19749:22)
    at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=0d558af5:19194:20)

Method 2: Using state management:

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

const [category, setCategory] = useState<string[]>([]);

<div>
  <div>
    <Select
      label="Select Category"
      onChange={(e) => {
        setCategory(
          categories.find((item) => item.category === e)?.subcategory ?? []
        );
      }}
    >
      {categories.map((category) => (
        <Option key={category.category} value={category.category.toLowerCase()}>
          {category.category}
        </Option>
      ))}
    </Select>
  </div>
  <div>
    <Select label="Select Subcategory" value="">
      {category.map((option: string) => (
        <Option key={option} value={option.toLowerCase()}>
          {option}
        </Option>
      ))}
    </Select>
  </div>
</div>;

There is no error here, but the options are not loading.

Solution

use MenuItem instead of Option

import React, { useState } from "react";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";

const categories = [
  {
    category: "Weapons",
    subcategory: ["Bows", "Catalysts", "Claymores", "Polearms", "Swords"],
  },
  {
    category: "Artifacts",
    subcategory: ["Pale Flame", "Crimson Witch of Flames", "Thundering Fury"],
  },
];

export default App = () => {
  const [category, setCategory] = useState([]);
  const [subcategory, setSubcategory] = useState("");

  return (
    <div>
      <div>
        <Select
          label="Select Category"
          onChange={(e) => {
            const selectedCategory = categories.find(
              (item) => item.category === e.target.value
            )?.subcategory;
            setCategory(selectedCategory ?? []);
            setSubcategory("");
          }}
        >
          {categories.map((category) => (
            <MenuItem key={category.category} value={category.category}>
              {category.category}
            </MenuItem>
          ))}
        </Select>
      </div>
      <div>
        <Select
          label="Select Subcategory"
          value={subcategory}
          onChange={(e) => setSubcategory(e.target.value)}
        >
          {category.map((option) => (
            <MenuItem key={option} value={option}>
              {option}
            </MenuItem>
          ))}
        </Select>
      </div>
    </div>
  );
};

If you wanna play around with the code.

Answered By - Anshu