Build a React color multi-select dropdown UI
Problem: Build a React Color Multi-Select Dropdown UI
Implement a React UI that allows users to multi-select colors from a dropdown and view their detailed properties.
You are provided with a JavaScript object where each key represents a color name (or ID) and its corresponding value is an object containing various properties for that color.
Example Input:
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:
- Render a dropdown (select-like) control that, when opened, displays a list of all available colors.
- Each color in the list must be selectable, supporting multi-selection. The UI should clearly indicate which colors are currently selected.
- Display a summary near the control, showing the count of selected colors, e.g.,
X color(s) selected. - Below the control, render a table that displays the properties of all currently selected colors.
- Each row in the table should correspond to a selected color.
- Columns should include the color name plus each property key from the color's properties object.
- Handle basic user experience (UX) concerns:
- Toggling a selected item should unselect it.
- The dropdown should open and close reliably.
- The UI should behave reasonably when no colors are selected.
Be prepared to discuss any trade-offs made during implementation, particularly concerning state shape, rendering performance with large lists of colors, and accessibility.
AI interview prep
Core dilemma
Balancing efficient state management for complex interactive UI elements with rendering performance, especially as the number of selectable items and selected items grows, while maintaining accessibility and component reusability.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Build a React color multi-select dropdown UI
Problem: Build a React Color Multi-Select Dropdown UI
Implement a React UI that allows users to multi-select colors from a dropdown and view their detailed properties.
You are provided with a JavaScript object where each key represents a color name (or ID) and its corresponding value is an object containing various properties for that color.
Example Input:
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:
- Render a dropdown (select-like) control that, when opened, displays a list of all available colors.
- Each color in the list must be selectable, supporting multi-selection. The UI should clearly indicate which colors are currently selected.
- Display a summary near the control, showing the count of selected colors, e.g.,
X color(s) selected. - Below the control, render a table that displays the properties of all currently selected colors.
- Each row in the table should correspond to a selected color.
- Columns should include the color name plus each property key from the color's properties object.
- Handle basic user experience (UX) concerns:
- Toggling a selected item should unselect it.
- The dropdown should open and close reliably.
- The UI should behave reasonably when no colors are selected.
Be prepared to discuss any trade-offs made during implementation, particularly concerning state shape, rendering performance with large lists of colors, and accessibility.