Build a transfer list

Loading problem workspace…

Build a transfer list · UIHero

Build a transfer list

Move selected or all options between two ordered lists without mutation or duplication.

MediumReact State Management

50 min0% acceptance

Description

Build a TransferList with available and selected collections, multi-selection, move-selected actions, and move-all actions. Item ordering must stay stable, actions must accurately disable, and caller-owned arrays must never be mutated.

Requirements

The solution exports the required TransferList API from the editable module.
List semantics works deterministically for the documented normal, boundary, and repeated-use scenarios.
Selected transfer works deterministically for the documented normal, boundary, and repeated-use scenarios.
Transfer all works deterministically for the documented normal, boundary, and repeated-use scenarios.
Stable order works deterministically for the documented normal, boundary, and repeated-use scenarios.
No duplicates works deterministically for the documented normal, boundary, and repeated-use scenarios.
Disabled actions works deterministically for the documented normal, boundary, and repeated-use scenarios.
The implementation derives new state without mutating caller-owned collections or records.

Move selected

Input

Select Design and Research, then activate Move right

Expected output

Both items move to Selected in their original order

Explanation

Moving twice never duplicates an item and the source items array is unchanged.

Constraints

Treat item IDs as unique stable identities
Preserve the original source ordering on both sides
Disable actions that cannot change state

Hints

Hint 1

Represent ownership and temporary checkbox selection as different pieces of state.

Hint 2

Derive each visible list from the source order and the set of selected IDs.

Hint 3

Clear temporary selections after a transfer so actions cannot accidentally repeat.

Reactstatecollections

Loading problem workspace…