React Suite Cascader Controlled

Last Updated : 01 Sep, 2022

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>GeeksforGeeks</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>GeeksforGeeks</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> 
    ); 
}