Question 73638 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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 levelsmenus 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?

Tags:

2

Answers


  1. 0

    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>
      ) : (
        ""
      )}
    </>
  );
    Login or Signup to reply.
  2. 0 
    const categories = [
    { mainItem: "a", mainLabel: "a Category Label" },
    { mainItem: "b", mainLabel: "b Category Label" },
    { mainItem: "c", mainLabel: "c Category Label" },
    { mainItem: "d", mainLabel: "d Category Label" },
  ];
  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);
    setSubCategory("");
  };
  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.mainItem} key={item.mainItem}>
            {item.mainItem}
          </MenuItem>
        ))}
      </Select>

      {category ? (
        <div style={{ marginTop: 20 }}>
          <InputLabel id={category}>
            {categories.filter((c) => c.mainItem === category)[0].mainLabel}
          </InputLabel>
          <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>
      ) : (
        ""
      )}
    </>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search