This section explains how to migrate the ChipList component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.
| EJ2 React | React | Description |
|---|
Props: enabled <ChipListComponent id="chip" disabled={true}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
</ChipsDirective>
</ChipListComponent> | Props: disabled <ChipList chips={chips}
disabled={true} /> | The enabled prop in EJ2 React chiplist has been renamed to disabled in React. This change aligns with standard React naming conventions. |
Props: cssClass <ChipListComponent cssClass='Custom'>
<ChipsDirective>
<ChipDirective text="Janet"></ChipDirective>
</ChipsDirective>
</ChipListComponent> | Props: className <ChipList chips={chips} className='Custom' /> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: enableDelete <ChipListComponent id="chip" enableDelete={true}>
<ChipsDirective>
<ChipDirective text="Janet"></ChipDirective>
</ChipsDirective>
</ChipListComponent> | Props: removable <ChipList chips={chips} removable={true} /> | The EJ2 React ChipList's enableDelete property has been replaced with the more intuitive removable property in React, providing a standardized way to control chip removal functionality. |
Props: selectedChips <ChipListComponent id="chip" selectedChips=[1,2]>
<ChipsDirective>
<ChipDirective text="Janet"></ChipDirective>
</ChipsDirective>
</ChipListComponent> | Props: selectedChips <ChipList chips={chips} selectedChips=[1,2] /> | The selectedChips prop maintains consistent functionality across both EJ2 React and React implementations, enabling developers to define and control the selection state of chips within the ChipList component. |
Props: selection <ChipListComponent id="chip" selection='multiple>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
</ChipsDirective>
</ChipListComponent> | Props: selection <ChipList chips={chips} selection='multiple /> | The selection prop is supported in both EJ2 React and React. |
| EJ2 React | React | Description |
|---|
Methods: created <ChipListComponent id="chiplist"
ref={(scope) => {
this.chiplistObj = scope} >
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
constructor(props: {}) {
this.chiplistObj.created();
}}
|
useEffect(() => {
console.log('created');
}, [])
<ChipList chips={chips} /> | The created event in the EJ2 React component is not available in a native React component. Instead, you can use the React useEffect hook to execute logic when the component is mounted. This hook is triggered after the component has been rendered to the DOM. |
Methods: destroy <ChipListComponent id="chiplist"
ref={(scope) => {
this.chiplistObj = scope
}>
<ChipsDirective>
<ChipDirective text="Janet"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
constructor(props: {}) {
this.chiplistObj.destroy();
}}
|
useEffect(() => {
return () => {
console.log('destroyed');
};
}, []);
<ChipList chips={chips} /> | The destroyed callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React useEffect hook to execute logic on component unmount. |
Methods: getSelectedChips <ChipListComponent id="chiplist"
ref={(scope) => {
this.chiplistObj = scope }>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
constructor(props: {}) {
this.chiplistObj.getSelectedChips();
}}
|
<ChipList ref={ChipList =>
this.ChipListInstance = ChipList} chips={chips}> </ChipList>
<button onClick={() =>
this.ChipListInstance.getSelectedChips()}>
click</button>
| Both EJ2 React and React implementations fully support the getSelectedChips() method, allowing developers to efficiently retrieve the collection of currently selected chip elements within the ChipList component. |
| EJ2 React | React | Description |
|---|
Events: delete <ChipListComponent
delete={handler} >
<ChipsDirective>
<ChipDirective text="Janet"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
| Events: onDelete <ChipList chips={chips} onDelete={handler}></ChipList> | The delete() event handler in EJ2 React chiplist has been renamed to onDelete() in React. This change aligns with standard React event naming conventions. |