React Suite Cascader ts:ItemDataType Prop

React Suite is a front-end library of React components used to develop intermediate designs and back-end products. It helps developers provide a smooth development experience, with fewer efforts. In this article, we will learn about the Cascader component of the react suite with ItemDataType as the prop used. 

The Cascader component is used to select the value with a hierarchical relationship between the data. The ts:ItemDataType prop helps select the list of items that are to be present under, the cascade hierarchical data. It is used under properties like data*, getChildren, onSelect, renderMenu, renderMenuItem, renderSearchItem, and renderValue. It is assigned in the form of an object, with various fields like label, value, and children, with nested components in it.

 ts:ItemDataType Props:

• Value: It is the cascader hierarchical list, from which we have to select the required items.
• Label: This value is associated with the `labelKey`, and displays data similar to the Value. 
• Children: It is an optional property of ItemDataType. It comprises child ItemDataTypes, of the Value or label. 
• groupBy: It helps classify the Cascader into multiple similar groups. 
• Loading: It is an optional property, and is used for components that have cascading relationships and lazy loading. E.g. Cascader, MultiCascader.

Syntax:

interface ItemDataType {
      value: string;
      label: ReactNode;
      children?: ItemDataType[];
      groupBy?: string;
      loading?: boolean;
}

Setting Up React Application:

Step 1: Create a React.js application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: The project structure will look like this:

Example 1: In this example, we will use the Cascader component with an ItemDataType prop, where we will see what is the syntax of ts:ItemDataType. In variable name, data we are storing a list of names, in the form of an array. Each element in the array is an object, with 3 keys i.e. label, value, and children, and each of them is assigned the required value. Under the App function, we will use the Cascader tag, with a data prop assigned to it which is of type ItemData. In the output, we could see a drop-down with names in it.

• App.js: Write down the below code in the App.js file, where App is our default component provided by React in which code is being written.

import "rsuite/dist/rsuite.css";
import React from 'react'
import { Cascader } from 'rsuite';

const App = () => {

    // Sample Options
    const data = [
        {
            "label": "DSA",
            "value": 1,
            "children": [
                {
                    "label": "Basic",
                    "value": 2
                },
                {
                    "label": "Advance",
                    "value": 3,
                    "children": [
                        {
                            "label": "DP",
                            "value": 4
                        },
                        {
                            "label": "Graph",
                            "value": 5
                        },
                        {
                            "label": "Fenwick Tree",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]

    return (
        <center>
            <div style={{
                display: 'block', width: 600, paddingLeft: 30
            }}>
                <h3>Geeks For Geeks</h3>
                <h4>Cascader Component</h4>
                <Cascader
                    style={{ width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />
            </div>
        </center>

    );
}

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Example 2: In this example, we will use the Cascader component with an ItemDataType prop, where we will see the disabled option in ts:ItemDataType. In variable name, data we are storing a list of names, in the form of an array. Each element in the array is an object, with 3 keys i.e. label, value, and children, and each of them is assigned the required value. Under the App function, we will use two cascader tags, the first is disabled with the disabled keyword, and the second is the default cascade list with data prop assigned to it which is of type ItemData. In the output, we could see a drop-down with names in it.

• App.js: Write down the below code in the App.js file, where App is our default component provided by React in which code is being written.

import "rsuite/dist/rsuite.css";
import React from 'react'
import { Cascader } from 'rsuite';
const App = () => {

    // Sample Options
    const data = [
        {
            "label": "DSA",
            "value": 1,
            "children": [
                {
                    "label": "Basic",
                    "value": 2
                },
                {
                    "label": "Advance",
                    "value": 3,
                    "children": [
                        {
                            "label": "DP",
                            "value": 4
                        },
                        {
                            "label": "Graph",
                            "value": 5
                        },
                        {
                            "label": "Fenwick Tree",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]

    return (
        <center>
            <div style={{
                display: 'block', width: 600, paddingLeft: 30
            }}>
                <h3>Geeks For Geeks</h3>
                <h4>Cascader Component</h4>
                <Cascader disabled
                    style={{ width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />

                <Cascader
                    style={{ paddingTop: '23px', width: 300 }}
                    placeholder="Select Your Favourite DSA Topic"
                    data={data}
                />
            </div>
        </center>

    );
}

export default App;

Steps to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output:

Reference: https://rsuitejs.com/components/cascader/#code-ts-item-data-type-code