Multi Level drop-down in ReactJS

Question

I'm trying to implement multilevel nested drop-down. I have made use of "react-dropdown". A new dropdown that appears so be displayed just below. But I'm unable to implement nested dropdown.

what to achieve something like this

this is my output

import React from "react";
import Dropdown from "react-dropdown";
import 'react-dropdown/style.css';

const object = [
    {value: 'course', 
    lable: "course" , 
    submenu: [
        { value: "PCF8883US/7EA/1Y", lable: "PCF8883US/7EA/1Y"},
        { value: "AT42QT1050-UUR", lable: "AT42QT1050-UUR" },
        { value: "PCF8883", lable: "PCF8883"} 
        ]
    },
    {value: "code", 
    lable:"code",
    submenu: [
        { value: "MC3672", lable: "MC3672"},
        { value: "MXC400XXC", lable: "MXC400XXC"}
        ]
    }
]

const course = [
    { value: "PCF8883US/7EA/1Y", lable: "PCF8883US/7EA/1Y"},
    { value: "AT42QT1050-UUR", lable: "AT42QT1050-UUR" },
    { value: "PCF8883", lable: "PCF8883"} 
]

const code = [
    { value: "MC3672", lable: "MC3672"},
    { value: "MXC400XXC", lable: "MXC400XXC"}
]

export class WorkSpace extends React.Component {
    render() {
        return (
            <div className="base_container">
                <div className="left">
                    <h3>Select Component</h3>
                    <div>
                    <Dropdown options={object} placeholder="Name">
                        <Dropdown options={course} onChange={this._onSelect} placeholder="course" />
                        <Dropdown options={code} onChange={this._onSelect} placeholder="code"/>
                    </Dropdown>
                    </div> 
                </div>    
            </div>
        );
    }
}

Answer 1

You could try the library React Treebeard . It gives a UI almost exactly like your example.