Toggle selected items immutably

Loading problem workspace…

Toggle selected items immutably · UIHero

Toggle selected items immutably

Build a controlled multi-select list that preserves item order and never mutates incoming values.

EasyReact State

25 min0% acceptance

Description

Build SelectableItems as a controlled component. Activating an item toggles its ID in the selectedIds array, supports multiple selections, emits a fresh array in source order, exposes selection semantics, and leaves item and selection props unchanged.

Requirements

The solution exports the required SelectableItems API from the editable module.
Toggle on off works deterministically for the documented normal, boundary, and repeated-use scenarios.
Multiple selection works deterministically for the documented normal, boundary, and repeated-use scenarios.
Stable order works deterministically for the documented normal, boundary, and repeated-use scenarios.
Immutable items works deterministically for the documented normal, boundary, and repeated-use scenarios.
Controlled state works deterministically for the documented normal, boundary, and repeated-use scenarios.
Every interactive control supports its documented keyboard behavior and exposes an accessible name.

Toggle twice

Input

Activate Alpha, then activate Alpha again

Expected output

The first callback includes alpha and the second callback excludes it

Explanation

Each callback receives a new array and the incoming selectedIds value is untouched.

Constraints

Keep the component controlled by selectedIds
Emit IDs in source item order
Use keyboard-operable controls with selection state

Hints

Hint 1

Derive the next membership set from the controlled value inside the click handler.

Hint 2

Map the source items to produce stable output ordering instead of appending blindly.

Hint 3

Use aria-pressed on toggle buttons so assistive technology receives the state.

Reactcontrolled componentsimmutability

Loading problem workspace…