Ant Design Transfer

Syntax

import { Transfer } from 'antd';

const data = [
  // Your transfer data here
];

const TransferComponent = () => {
  return (
    <Transfer
      dataSource={data}
      targetKeys={/* initial target keys */}
      render={(item) => item.title}
    />
  );
};

Example

Here is a basic example of how to use the Ant Design Transfer component:

<TransferComponent />

Explanation

The Transfer component in Ant Design is used to move items between two lists. It is commonly used for scenarios where users need to select items from a larger pool and move them to a selected set.

• dataSource: An array of data items that represent the transferable content.
• targetKeys: An array of keys indicating the selected items in the target list.
• render: A function to customize the display of items.

Use

The Transfer component is useful in scenarios such as selecting items for a task or categorizing items into different groups.

Important Points

• Ensure that you provide a unique key for each item in the dataSource array.
• The render function is essential for customizing the appearance of each item in the transfer lists.

Summary

In summary, the Ant Design Transfer component is a versatile tool for managing the transfer of items between two lists. By providing a clear and intuitive interface, it enhances the user experience in scenarios where item selection and categorization are crucial.