FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Transfer List

20 mins

Build a Transfer List component in React that allows moving items between two lists.

Requirements:

  1. Display two lists side by side: "Available" and "Selected".
  2. Each list should display its items.
  3. User should be able to:
    • Move an item from "Available" to "Selected".
    • Move an item from "Selected" back to "Available".
  4. Items should not be duplicated; each item should only exist in one list at a time.
  5. Focus on functionality over styling.
  6. The component should work out-of-the-box in a live React preview (e.g., CodeSandbox/Sandpack).

Code Editor

React Component

00:00
Loading...

Live Preview

See your React component