React Suite CheckPicker ts:ItemDataType Prop

Last Updated : 29 Jan, 2023

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 CheckPicker component of the react suite with ItemDataType as the prop used.

CheckPicker component is used to select the multiple values, from a drop-down list, with grouping allowed. The ts:ItemDataType prop helps select the list of items that are to be present under, the CheckPicker list. It is used under properties like data*, onSelect, renderMenuGroup, and renderValue. It is assigned in the form of an array and then recreated with the help of the Map() function, to correct its syntax.

ts:ItemDataType Props:

Value: It is the checkpicker 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 CheckPicker into multiple similar groups.
Loading: It is an optional property, and is used with cascader and 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 CheckPicker 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. The created array is recreated, to provide the syntax of ItemDataType, using Map() function, and thus reassigning the items, in label and value props. Under the App function, we will use the CheckPicker 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.

Javascript

import React, { useState } from "react"; 
import "rsuite/dist/rsuite.css"; 
import { CheckPicker } from 'rsuite'; 
  
const data = [ 
    'Arushi', 
    'Gautam', 
    'Radha', 
    'Krishna', 
    'Sita', 
    'Rama'
].map(item => ({ label: item, value: item })); 
  
const App = () => { 
    return ( 
        <center> 
            <h3>GeeksForGeeks</h3> 
            <h4>Checkbox component</h4> 
            <br /> 
            <CheckPicker data={data} style={{ width: 224 }} /> 
        </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 CheckPicker component with an ItemDataType prop, where we will see the use of variables/numbers in ItemDataType. In variable name, data we are storing an array of size 100, with item data as gfg0, gfg1, gfg2, etc. Under the App function, we will use the CheckPicker 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.

Javascript

import React, { useState } from "react"; 
import "rsuite/dist/rsuite.css"; 
import { CheckPicker } from 'rsuite'; 
  
const data = Array.from({ length: 100 }).map((_, index) => { 
    return { 
        label: `gfg ${index}`, 
        value: `gfg ${index}` 
    }; 
}); 
  
const App = () => { 
    return ( 
        <center> 
            <h3>GeeksForGeeks</h3> 
            <h4>Checkbox component</h4> 
            <br /> 
            <CheckPicker data={data} style={{ width: 224 }} /> 
        </center> 
    ); 
}; 
  
  
export default App;