how do I create a menu that opens another menu when I click on an item?

Question

I'm trying to create a cascading select to define a category of a file

const categories = ["a", "b", "c", "d"];  


    <InputLabel id="category">Category</InputLabel>
            <Select
              labelId="category"
              id="category"
              value={category}
              label="Category"
              onChange={handleChange}
              fullWidth
            >
              {categories.map((item) => (
                <MenuItem value={item} key={item}>
                  {item}
                </MenuItem>
              ))}
            </Select>
            <FileUpload setFileNames={setFileNames} setFiles={setFiles} />

          

I would like to add more levels\menus that appear when a value of the first menu is clicked and then categorize the file. first i'm trying to create the multilevel menu. could you give me some advice?

Answer 1

Below is basic layout where the next menu shows up based on the category selected but found this for better styled menu: https://mui-nested-menu.vercel.app/nested-dropdown

const categories = ["a", "b", "c", "d"];
  const subMenu = {
    a: ["aMenu1", "aMenu2"],
    b: ["bMenu1", "bMenu2"],
    c: ["cMenu1", "cMenu2", "cMenu3"],
    d: ["dMenu1", "dMenu2", "dMenu3", "dMenu4"],
  };

  const [category, setCategory] = useState("");
  const [subCategory, setSubCategory] = useState("");

  const handleChange = (event) => {
    setCategory(event.target.value);
  };
  const handleChange2 = (event) => {
    setSubCategory(event.target.value);
  };
  return (
    <>
      <InputLabel id="category">Category</InputLabel>
      <Select
        labelId="category"
        id="category"
        value={category}
        label="Category"
        onChange={handleChange}
        fullWidth
      >
        {categories.map((item) => (
          <MenuItem value={item} key={item}>
            {item}
          </MenuItem>
        ))}
      </Select>

      {category ? (
        <div style={{ marginTop: 20 }}>
          <Select
            labelId="subCategory"
            id="subCategory"
            value={subCategory}
            label="SubCategory"
            onChange={handleChange2}
            fullWidth
          >
            {subMenu[category].map((item2) => (
              <MenuItem value={item2} key={item2}>
                {item2}
              </MenuItem>
            ))}
          </Select>
        </div>
      ) : (
        ""
      )}
    </>
  );