Facebook Pixel

Transfer List

React.js
medium
30 mins

Build a simple Transfer List component in React that allows users to move items between two lists: "Available Items" and "Selected Items".

Requirements

  • Display two lists: Available Items and Selected Items.
  • Each item should be represented by a checkbox.
  • Provide buttons to move selected items between the lists.
  • Only use these items "Item A", "Item B", "Item C"
  • Handle selection/deselection of items.
  • Lists should update accordingly after every move.

Constraints & Edge Cases

  • Items must not duplicate when moved.
  • Moving an item should remove it from its current list.
  • Handle empty selection without error.
  • Initial state can be hardcoded for simplicity.

Reference UI

transferList

Preview what you need to build

Companies:

salesforce
microsoft
flipkart

Solve Similar questions 🔥