Multi-Select

Build a multi-select skills picker as a single React component. Chosen skills show as removable chips inside the control; the dropdown below lists only the skills you haven't picked yet. Add one and it moves up into a chip; remove a chip and it drops back into the list. No duplicates, ever — because there is only one array, and every option is either in it or not.

Task

The starter App.tsx renders an inert snapshot: two chips (React, TypeScript) and the remaining six options below. Make it live:

1. Hold the state. Track a selected string array with useState(['React', 'TypeScript']).
2. Derive, don't duplicate. Compute available on every render as the full list minus selected — never store it in its own state.
3. Add on option click. Clicking an option appends it to selected immutably: setSelected([...selected, o]).
4. Remove on chip ×. Clicking a chip's × button filters it out: setSelected(selected.filter((s) => s !== o)).

Examples

• Load: chips React and TypeScript; the list shows Vue, Angular, Svelte, Node, GraphQL, CSS.
• Click Vue in the list: a Vue chip appears and Vue disappears from the list.
• Click the × on the React chip: the chip vanishes and React returns to the list.

Notes

• One source of truth. selected is the only state; available is derived. Two arrays that must be kept in agreement is exactly the bug you're avoiding.
• No duplicates by construction. The list only ever renders available, so an already-chosen option isn't there to add again.
• Immutable updates. Build a new array with spread / filter; don't push or splice the existing state.
• Styling (control, chips, list) is already in styles.css; focus on the state.