React Suite Cascader Parent Selectable

Last Updated : 10 Jul, 2022

React Suite is a front-end library designed for the middle platform and back-end products. React Suite Cascader component is used as a single selection of data with a hierarchical relationship structure.

The parentSelectable Prop takes a boolean value. It defines whether we can select the parent node or not.

Syntax:

<Cascader parentSelectable={} />

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: We are importing the Cascader Component from "rsuite" and to apply the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

We are adding two Cascader components we are passing a list named data containing the names of countries to the data prop of the component and some inline styling, the first we kept as it is and to the next one we are passing the parentSelectable prop value as true.

App.js

import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    const countries = [
        {
            label: "India",
            value: "India",
            children: [
                {
                    label: "Haryana",
                    value: "Haryana",
                },
                {
                    label: "Assam",
                    value: "Assam",
                },
                {
                    label: "West Bengal",
                    value: "West Bengal",
                },
                {
                    label: "Nagaland",
                    value: "Nagaland",
                },
            ],
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];

    return (
        <div className="App">
            <h4> React Suite Cascader parentSelectable</h4>
            <p>
                <b style={{ marginLeft: 30 }}> 
                    default</b>
                <b style={{ marginLeft: 80 }}> 
                    parentSelectable= true</b>
            </p>
            <Cascader data={countries} style={{ 
                marginLeft: 30, marginTop: 10 }} />

            <Cascader
                data={countries}
                style={{ marginLeft: 80, marginTop: 10 }}
                parentSelectable={true}
            />
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project's root directory.

npm start

Output

Example 2: We are adding data prop to the Cascader component as countries, which is a list of countries' names, We are adding the picker component using the useRef hook, and named it as cascade and will pass it to the ref prop of the component. We are further adding a button with a label as the state-defined selectBool created using react hook useState, added an onClick function that will call the onHandleChange function that will change the current state of the selectBool and cascade.current.open() will keep the component open.

App.js

import { useState, useRef } from "react";
import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    const cascade = useRef();
    const [selectBool, setSelectBool] = useState(false);

    const onHandleChange = () => {
        setSelectBool(!selectBool);
        cascade.current.open();
    };
    const countries = [
        {
            label: "India",
            value: "India",
            children: [
                {
                    label: "Haryana",
                    value: "Haryana",
                },
                {
                    label: "Assam",
                    value: "Assam",
                    children: [
                        {
                            label: "Darrang",
                            value: "Darrang",
                        },
                        {
                            label: "Dhemaji",
                            value: "Dhemaji",
                        },
                    ],
                },
                {
                    label: "West Bengal",
                    value: "West Bengal",
                    children: [
                        {
                            label: "Hooghly",
                            value: "Hooghly",
                        },
                        {
                            label: "Darjeeling",
                            value: "Darjeeling",
                        },
                    ],
                },
                {
                    label: "Nagaland",
                    value: "Nagaland",
                },
            ],
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];

    return (
        <div className="App">
            <h4> React Suite Cascader parentSelectable</h4>
            <p>
                <b style={{ marginLeft: 30 }}> 
                    parentSelectable ?</b>
                <button
                    onClick={onHandleChange}
                    style={{ marginLeft: 10, fontSize: 15, 
                             padding: 10 }}
                >
                    {"" + selectBool}
                </button>
            </p>

            <Cascader
                data={countries}
                style={{ marginLeft: 80, marginTop: 10 }}
                parentSelectable={selectBool}
                ref={cascade}
            />
        </div>
    );
}

export default App;