Build a React color multi-select dropdown UI

Q: Build a React color multi-select dropdown UI

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.

Q: How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

Q: What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during Technical Screen rounds at Brex.

Q: What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Brex during technical interviews.

Question

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:

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, shows a list of all colors.
Each color in the list is selectable (multi-select). The UI should make it clear which colors are currently selected.
Show a summary near the control: X color(s) selected .
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).
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).

Build a React color multi-select dropdown UI

Quick Overview

Solution

Comments (0)