Build a Transfer List

Question

Accepted Answer

## Building a Transfer List in React

**Mental model:** Two lists (left/right) plus a *selection* set of items the user has ticked. Move buttons shift selected items between sides. Model the two columns as arrays and the ticks as a `Set`; moving is array filter + concat, then clear the moved ticks.

### Step 1 — Two arrays + a checked Set
```jsx
const [left, setLeft] = useState(initialLeft);
const [right, setRight] = useState(initialRight);
const [checked, setChecked] = useState(new Set());
```

### Step 2 — Toggle a tick
```jsx
const toggle = (id) => setChecked((s) => {
  const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
});
```

### Step 3 — Move checked across
Partition the source by checked-ness; append to the target.

```jsx
const moveRight = () => {
  const moving = left.filter((i) => checked.has(i.id));
  setRight((r) => [...r, ...moving]);
  setLeft((l) => l.filter((i) => !checked.has(i.id)));
  setChecked(new Set());
};
```

### Step 4 — Enable buttons by s

Build a Transfer List

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)