Build a Transfer List | Interview Question

Q: Build a Transfer List

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes React state, props and lists; derived state, sets and the indeterminate checkbox are explained from zero. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The Verified output was produced by running the solution on React 19.3.1 (StrictMode) in jsdom with a driver that clicked checkboxes, typed into the filters and pressed the move buttons. ## 1. Why This Even Matters — A Story First Picture packing for a trip with two piles on the bed: "staying home" and "in the suitcase". You tick a few things on your list, carry them across, change your mind about the umbrella and carry it back. A sensible packing list never reshuffles itself: socks are always above the toothbrush, whichever pile they are in. A **transfer list** is that bed with two pi

The problem

Question presented to candidate: "Our report builder lets users pick which columns appear in an export. Build a transfer list: available columns on the left, chosen columns on the right, checkboxes to mark items, and buttons to move the checked ones across, or everything at once."

Requirements:

Two panels, "Available" and "Chosen", each with a list of checkboxes, a filter box and a header checkbox that checks every item currently shown.
The header checkbox is checked when all shown items are checked, unchecked when none are, and indeterminate when only some are.
Four buttons: move all shown right, move checked right, move checked left, move all shown left; each is disabled when it would do nothing.
Items keep the original (master) order on both sides, whatever order they were moved in; moved items arrive unchecked.
The component is controlled: the parent receives the ids on the right as an array, in master order.

What a strong answer should cover:

A single source of truth: one master list plus the set of chosen ids, with both panels derived from it instead of two arrays that are spliced back and forth.
A Set of checked ids, filtering that applies only to what is shown, and moves that act on the shown and checked items.
The indeterminate state is a DOM property with no HTML attribute, so it must be set through a ref (React) or a property binding (Vue / Angular).
Disabled logic derived from the same data, and accessible labels for the icon buttons and checkboxes.
Splitting a stateful container from a presentational panel used twice.

Clarifying questions expected:

"Should the chosen side keep the master order or the order items were moved in?"
"Do 'move all' buttons act on everything or only on the filtered items?"
"Should the chosen list be reorderable?"

Code / implementation expected: Yes. A controlled transfer-list component built from a reusable panel component.

React
Lists
Selection

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a machine coding round. Assumes React state, props and lists; derived state, sets and the indeterminate checkbox are explained from zero. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The Verified output was produced by running the solution on React 19.3.1 (StrictMode) in jsdom with a driver that clicked checkboxes, typed into the filters and pressed the move buttons.

1. Why This Even Matters — A Story First

Picture packing for a trip with two piles on the bed: "staying home" and "in the suitcase". You tick a few things on your list, carry them across, change your mind about the umbrella and carry it back. A sensible packing list never reshuffles itself: socks are always above t

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import TransferList from "./src/components/TransferList";
import { COLUMNS } from "./src/utils/columns";

export default function App() {
  const [chosen, setChosen] = useState([]);
  return (
    <main className="page">
      <h1>Report columns</h1>
      <TransferList items={COLUMNS} value={chosen} onChange={setChosen} />
      <p className="value" data-testid="value">
        Value: {JSON.stringify(chosen)}
      </p>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.