React Migration in Chip Component

This section explains how to migrate the Chip component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `avatarIconCss` `#chip-avatar .andrew { background-image: url('https://ej2.syncfusion.com/demos/ src/chips/images/andrew.png')} <ChipListComponent text="Andrew" avatarIconCss='andrew'> </ChipListComponent>`	Props: `avatar` `<Chip avatar={<>A</>}> Andrew</Chip>`	The `avatarIconCss` property used in EJ2 React Chip has been replaced with the `avatar` prop (e.g : String and React.ReactNode) in React. This allows direct usage of React components or SVG elements as avatars rather than `CSS class` references.
Props: `cssClass` `<ChipListComponent text='Success' cssClass='Custom'></ChipListComponent>`	Props: `className` `<Chip className='Custom'> Success</Chip>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `enabled` `<ChipListComponent text='David' enabled={true} ></ChipListComponent>`	Props: `disabled` `<Chip disabled={true}>David</Chip>`	The `enabled` prop in EJ2 React `chiplist` has been renamed to `disabled` in React. This change aligns with standard React naming conventions.
Props: `leadingIconCss` `<ChipListComponent text="Janet Taylor" leadingIconCss={'john'}></ChipListComponent>`	Props: `leadingIcon` `<Chip leadingIcon={<UserIcon />}> Janet Taylor</Chip>`	The `leadingIconCss` property used in EJ2 React Chip has been replaced with the `leadingIcon` prop (e.g : String and React.ReactNode) in React. This allows direct usage of React components or SVG elements as avatars rather than `CSS class` references.
Props: `leadingIconUrl` `<ChipListComponent text='Anne' leadingIconUrl={'https://react.syncfusion.com/react-ui/images/common/anne.png' }></ChipListComponent>`	Props: `leadingIconUrl` `<Chip leadingIconUrl={'https://react.syncfusion.com/react-ui/images/common/anne.png' }> Anne </Chip>`	The `leadingIconUrl` prop is supported in both EJ2 React and React.
Props: `enableDelete` `<ChipListComponent text='Anne' enableDelete={true}></ChipListComponent>`	Props: `removable` `<Chip removable={true}>Anne</Chip>`	The `enableDelete` prop in EJ2 React `chiplist` has been renamed to `removable` in React. This change aligns with standard React naming conventions.
Props: `trailingIconUrl` `<ChipListComponent text='Anne' trailingIconUrl={ 'https://react.syncfusion.com/react-ui/images/common/anne.png' }></ChipListComponent>`	Props: `trailingIconUrl` `<Chip trailingIconUrl={ 'https://react.syncfusion.com/react-ui/images/common/anne.png' }>Anne</Chip>`	The `trailingIconUrl` prop is supported in both EJ2 React and React.
Props: `text` `<ChipListComponent text='Anne' ></ChipListComponent>`	Props: `text` `<Chip text={'Anne'} ></Chip>`	The `text` prop is supported in both EJ2 React and React.
Props: `trailingIconCss` `<ChipListComponent text= 'Janet' trailingIconCss={'e-dlt-btn'}></ChipListComponent>`	Props: `trailingIcon` `<Chip trailingIcon={<DeleteIcon />}>Janet</Chip>`	The `trailingIconCss` prop in EJ2 React `chiplist` has been renamed to `trailingIcon` in React. This change aligns with standard React naming conventions.
Props: `e-flat`, `e-outline` `<ChipListComponent text="Janet" cssClass='e-flat'></ChipListComponent>`	Props: `variant` `<Chip variant={Variant.Standard}>Janet</Chip>`	CSS class-based styling (e.g., cssClass='e-flat') in EJ2 React has been replaced with the type-safe variant prop in React. Use the Variant enum with options like `Filled`, `Standard`, and `Outlined`.
Props: `e-primary`, `e-success`, `e-info`, `e-warning`, `e-danger` `<ChipListComponent text='Info' cssClass='e-info'></ChipListComponent>`	Props: `Color` `<Chip color={Color.Info}>Info</Chip>`	CSS class-based coloring in EJ2 React has been replaced with a type-safe color prop in React. Use the Color enum to represent various colors like `Primary`, `Secondary`, `Warning`, `Success`, `Error`, and `Info`.`

Methods

EJ2 React	React	Description
Methods: `created` `<ChipListComponent id="chip" ref={(scope) => { this.chipObj = scope } /> constructor(props: {}) { this.chipObj.created(); }}`	`useEffect(() => { console.log('Chip component is created'); }, []) <Chip text={'Janet'} ></Chip>`	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="chip" ref={(scope) => { this.chipObj = scope } /> constructor(props: {}) { this.chipObj.destroy(); }}`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <Chip>Janet</Chip>`	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.

Events

EJ2 React	React	Description
Events: `delete` `<ChipListComponent text='Janet' delete={handler} > </ChipListComponent>`	Events: `onDelete` `<Chip onDelete={handler}>Janet</Chip>`	The `delete()` event handler in EJ2 React `chiplist` has been renamed to `onDelete()` in React. This change aligns with standard React event naming conventions.