Thursday, September 4, 2025
HomeLanguagesReact Suite Cascader Controlled

React Suite Cascader Controlled

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite Cascader Controlled.

A cascader is used for a single selection of data with a hierarchical relationship structure. A controlled cascader is one that specifies the values of the selected items.

Cascader Props:

  • appearance: It is used for the component appearance.
  • block: It is used to block an entire row.
  • childrenKey: It is used to set the children’s key in data.
  • classPrefix: It is used to indicate the component CSS class’s prefix.
  • cleanable: It is used to indicate whether the option can be emptied or not.
  • container: It is used to set the rendering container.
  • data: It is used to denote the selectable data.
  • defaultOpen: It is used to denote the default value of the open property.
  • defaultValue: It is used to denote the default value.
  • disabled: It is used to indicate whether the component is disabled or not.
  • disabledItemValues: It is used to disable optionally.
  • height: It is used to denote the menu height.
  • lnline: It is used to make the menu displayed directly when the component is initialized.
  • labelKey: It is used to set the options to display the ‘key’ in ‘data’.
  • menuHeight: It is used to set the height of the menu.
  • menuWidth: It is used to set the width of the menu.
  • onChange: It is a callback function that is triggered when the value changes.
  • onClean: It is a callback function that is triggered when the value is clean.
  • onClose: It is a callback function that is triggered on a close event.
  • onEnter: It is a callback function that is triggered before the overlay transitions in.
  • onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
  • onEntering: It is a callback function that is triggered as the overlay begins to transition in.
  • onExit: It is a callback function that is triggered right before the overlay transitions out.
  • onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
  • onExiting: It is a callback function that is triggered as the overlay begins to transition out.
  • onOpen: It is a callback function that is triggered on open of the component.
  • onSearch: It is a callback function for the search.
  • onSelect: It is a callback function that is triggered on the selection of an option.
  • parentSelectable: It is used to make the parent node selectable.
  • placeholder: It is used to denote the placeholder.
  • placement: It is used for the placement of components.
  • preventOverflow: It is used to prevent floating element overflow.
  • renderExtraFooter: It is used for the custom render extra footer.
  • renderMenu: It is used for customizing the Rendering Menu list.
  • renderMenuItem: It is used for the custom render menu items
  • renderValue: It is used for the custom Render selected options.
  • searchable: It is used to indicate whether you can search for options or not.
  • size: It is used to denote the picker size.
  • toggleComponentClass: It can be used for the custom element for this component.
  • value: It is used to denote the value (Controlled).
  • valueKey: It is used to set the option value ‘key’ in ‘data’.

Syntax:

<Cascader 
    value={value} 
    onChange={setValue} 
    data={data} 
/>

Creating React Application and Installing Module:

Step 1: Create a react application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

 

Example 1: Below is the example that demonstrates the React Suite Controlled Cascader component.

Javascript




import "rsuite/dist/rsuite.min.css";
import { Cascader } from "rsuite";
import { useState } from "react";
  
const customData = [
    {
        label: "Data Structures",
        value: 1,
        children: [
            {
                label: "Queue",
                value: 2,
                children: [
                    {
                        label: "Priority Queue",
                        value: 3,
                    },
                    {
                        label: "FIFO Queue",
                        value: 4,
                    },
                ],
            },
            {
                label: "Linked List",
                value: 5,
                children: [
                    {
                        label: "Circular",
                        value: 6,
                    },
                    {
                        label: "Double",
                        value: 7,
                    },
                    {
                        label: "Single",
                        value: 8,
                    },
                ],
            },
        ],
    },
    {
        label: "Algorithms",
        value: 9,
        children: [
            {
                label: "Search",
                value: 2,
                children: [
                    {
                        label: "Binary Search",
                        value: 3,
                    },
                    {
                        label: "Linear Search",
                        value: 4,
                    },
                ],
            },
            {
                label: "Sorting",
                value: 5,
                children: [
                    {
                        label: "Bubble Sort",
                        value: 6,
                    },
                    {
                        label: "Selection Sort",
                        value: 7,
                    },
                    {
                        label: "Insertion Sort",
                        value: 8,
                    },
                ],
            },
        ],
    },
]
  
export default function App() {
    const [value, setValue] = useState(3);
  
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>neveropen</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Cascader Controlled
                </h4>
            </div>
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <Cascader
                        value={value}
                        onChange={setValue}
                        style={{ width: 300 }}
                        data={customData}
                    />
                </div>
            </div>
        </div>
    );
}


Output:

 

Example 2: Below is another example that demonstrates the Controlled elements from two different lists in Cascader component.

Javascript




import "rsuite/dist/rsuite.min.css";
import { Cascader } from "rsuite";
import { useState } from "react";
  
const customData = [
    {
        label: "Data Structures",
        value: 1,
        children: [
            {
                label: "Queue",
                value: 2,
                children: [
                    {
                        label: "Priority Queue",
                        value: 3,
                    },
                    {
                        label: "FIFO Queue",
                        value: 4,
                    },
                ],
            },
            {
                label: "Linked List",
                value: 5,
                children: [
                    {
                        label: "Circular",
                        value: 6,
                    },
                    {
                        label: "Double",
                        value: 7,
                    },
                    {
                        label: "Single",
                        value: 8,
                    },
                ],
            },
        ],
    },
    {
        label: "Algorithms",
        value: 9,
        children: [
            {
                label: "Search",
                value: 10,
                children: [
                    {
                        label: "Binary Search",
                        value: 11,
                    },
                    {
                        label: "Linear Search",
                        value: 12,
                    },
                ],
            },
            {
                label: "Sorting",
                value: 13,
                children: [
                    {
                        label: "Bubble Sort",
                        value: 14,
                    },
                    {
                        label: "Selection Sort",
                        value: 15,
                    },
                    {
                        label: "Insertion Sort",
                        value: 16,
                    },
                ],
            },
        ],
    },
]
  
export default function App() {
    const [value, setValue] = useState(1_2);
  
    return (
        <div>
            <div style={
                {
                    textAlign: "center"
                }}>
                <h2>neveropen</h2>
                <h4 style={
                    {
                        color: "green"
                    }}>
                    React Suite Cascader Controlled
                </h4>
            </div>
            <div style={
                {
                    padding: 20,
                    textAlign: "center"
                }}>
                <div>
                    <Cascader
                        value={value}
                        onChange={setValue}
                        style={{ width: 300 }}
                        data={customData}
                    />
                </div>
            </div>
        </div>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/cascader/#contorlled

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32261 POSTS0 COMMENTS
Milvus
81 POSTS0 COMMENTS
Nango Kala
6626 POSTS0 COMMENTS
Nicole Veronica
11795 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11855 POSTS0 COMMENTS
Shaida Kate Naidoo
6747 POSTS0 COMMENTS
Ted Musemwa
7023 POSTS0 COMMENTS
Thapelo Manthata
6695 POSTS0 COMMENTS
Umr Jansen
6714 POSTS0 COMMENTS