Build a React color multi-select dropdown UI
Company: Brex
Role: Software Engineer
Category: Software Engineering Fundamentals
Difficulty: medium
Interview Round: Technical Screen
Implement a React UI that lets users multi-select colors from a dropdown and view details.
You are given a JavaScript object where each key is a color name (or id) and the value is an object of properties for that color.
Example input:
```js
const colorsByName = {
red: { hex: "#FF0000", rgb: "255,0,0", family: "warm", contrastOnWhite: "AA" },
green: { hex: "#00FF00", rgb: "0,255,0", family: "cool", contrastOnWhite: "A" },
blue: { hex: "#0000FF", rgb: "0,0,255", family: "cool", contrastOnWhite: "AAA" },
// ... potentially many more
};
```
Requirements:
1. Render a dropdown (select-like) control that, when opened, shows a list of all colors.
2. Each color in the list is selectable (multi-select). The UI should make it clear which colors are currently selected.
3. Show a summary near the control: `X color(s) selected`.
4. Below the control, render a table showing the properties of all selected colors.
- Each row corresponds to a selected color.
- Columns correspond to the properties (include the color name plus each property key).
5. Handle basic UX concerns:
- Toggling a selected item unselects it.
- Closing/opening the dropdown works reliably.
- Reasonable behavior when no colors are selected.
Discuss any trade-offs you make (state shape, rendering performance with large lists, accessibility).
Quick Answer: This question evaluates front-end React skills including component architecture, state management, data-driven rendering, accessibility considerations, and performance trade-offs involved in implementing a multi-select dropdown that presents selected colors' properties.