How to use nested optgroup reactjs

Question

I have this nested optgroup:

<select>
<optgroup label="A">
<optgroup label="B">
     <option>C</option>
     <option>D</option>
     <option>G</option>
</optgroup>

<optgroup label="J">
     <option>K</option>
     <option>L</option>
     <option>M</option>

</optgroup>
</optgroup>
</select>

but the result is:

Answer 1

You can use Select from react-select.

import Select from "react-select";

const options = [
  {
    label: "A",
    options: [
      {
        label: "B",
        options: [
          {
            label: "C",
            value: 1
          },
          {
            label: "D",
            value: 2
          },
          {
            label: "G",
            value: 3
          }
        ]
      },
      {
        label: "J",
        options: [
          {
            label: "K",
            value: 4
          },
          {
            label: "L",
            value: 5
          },
          {
            label: "M",
            value: 6
          }
        ]
      }
    ]
  }
];

export const NestedOptGroup = () => <Select name="options" options={options} />

There is a working example of this react-select feature: https://codesandbox.io/s/react-codesandboxer-example-8xxyx?file=/index.js

Source: How can I create nested option groups in React Select (V2)?

Answer 2

you can use only 1 sub group, like this

  <select>
    <optgroup label="B">
      <option>C</option>
      <option>D</option>
      <option>G</option>
    </optgroup>
    <optgroup label="J">
      <option>K</option>
      <option>L</option>
      <option>M</option>
    </optgroup>
  </select>

if you wish add more subgroups you need to hack the identation here have other answers for this: Nesting optgroups in a dropdownlist/select