React Suite Cascader Block

0 0 2 minutes read

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Cascader component is used as a cascade selection box. It helps the user in a Single selection of data with a hierarchical relationship structure. Block in cascader helps to create a cascader like a block element in HTML. It will occupy the whole space as a block.

Syntax:

<Cascader block data={data} />

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it 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: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import react from 'react'
import { Cascader } from 'rsuite'; 
import 'rsuite/dist/rsuite.min.css'; 
  
export default function App() { 
    // Sample Options 
    const options = [ 
        { 
            "label": "zambiatek", 
            "value": 1, 
            "children": [ 
                { 
                    "label": "Machine Learning", 
                    "value": 2 
                }, 
                { 
                    "label": "Data Structures", 
                    "value": 3, 
  
                } 
            ] 
        }, 
        { 
            "label": "StackOverFlow", 
            "value": 8, 
            "children": [ 
                { 
                    "label": "Databases", 
                    "value": 9 
                }, 
                { 
                    "label": "Operating System", 
                    "value": 10, 
  
                } 
            ] 
        }, 
        { 
            "label": "Tutorial Point", 
            "value": 13, 
            "children": [ 
                { 
                    "label": "Engineering Mathematics", 
                    "value": 14 
                }, 
                { 
                    "label": "Theory of Computation", 
                    "value": 15 
                } 
            ] 
        } 
    ] 
  
    return ( 
        <div className="App"> 
            <h1 style={{ color: 'green' }}>zambiatek</h1> 
            <h3>React Suite Cascader Block</h3> 
            <Cascader block data={options} /> 
        </div> 
    ); 
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Example 2: In this example, we will create a nested cascader (options inside options) and use the block keyword with it.

Javascript

import react from 'react'
import { Cascader } from 'rsuite'; 
import 'rsuite/dist/rsuite.min.css'; 
  
export default function App() { 
    // Sample Options 
    const options = [ 
        { 
            "label": "Uttar Pradesh", 
            "value": 1, 
            "children": [ 
                { 
                    "label": "Moradabad", 
                    "value": 2 
                }, 
                { 
                    "label": "Bareilly", 
                    "value": 3, 
                    "children": [ 
                        { 
                            "label": "Vijay Nagar", 
                            "value": 4 
                        }, 
                        { 
                            "label": "Rajiv Gandhi Square", 
                            "value": 5 
                        }, 
                        { 
                            "label": "MR 10", 
                            "value": 6 
                        }, 
                    ] 
                }, 
                { 
                    "label": "Lucknow", 
                    "value": 7 
                } 
            ] 
        } 
    ] 
    return ( 
        <div className="App"> 
            <h1 style={{ color: 'green' }}>zambiatek</h1> 
            <h3>React Suite Cascader Block</h3> 
            <Cascader block data={options} /> 
        </div> 
    ); 
}

Output:

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!