React UI: Multi-select Color Dropdown and Selected Properties Table

Color Selection Dropdown with Data Table Medium · React, Component Design · — · Lift selection state to the parent and use a Set to toggle items.

You are building a React interface for exploring a color catalog and reviewing details about chosen entries. You receive a COLOR_DATA object keyed by color name; each key maps to another object holding that color’s properties.

Implement the following behavior:

• A dropdown control lists every color in COLOR_DATA. While the dropdown is open, all entries are visible, and each one can be turned on or off. Multiple colors may be active at the same time.
• Immediately next to the dropdown, display the label X color selected, where X is the current number of active colors.
• Below the dropdown, render an HTML table. The table must show one row for each active color and include columns for the color name plus at least two of its stored properties.
• Whenever the active selection changes, both the X color selected label and the table must update, including when the selection becomes empty.

You may choose any reasonable state shape and table columns, but the dropdown must be populated from COLOR_DATA, and the table must reflect only the active entries. A componentized design such as ColorDropdown, SelectedSummary, and ColorTable is recommended.

The examples use this sample catalog:

COLOR_DATA = {
  "Amber":   { "hex": "#FFBF00", "category": "warm", "rating": 4 },
  "Emerald": { "hex": "#50C878", "category": "cool", "rating": 5 },
  "Indigo":  { "hex": "#4B0082", "category": "cool", "rating": 3 },
  "Coral":   { "hex": "#FF7F50", "category": "warm", "rating": 4 }
}

Example 1:

Action: open the dropdown, select "Amber", then select "Emerald".

Output:

2 colors selected

| Color   | Hex     | Category | Rating |
| Amber   | #FFBF00 | warm     | 4      |
| Emerald | #50C878 | cool     | 5      |

Explanation: Both active colors appear in the table and the summary matches the number of active colors.

Example 2:

Action: select "Indigo", then deselect "Indigo".

Output:

0 color selected

No selected colors.

Explanation: The table changes from one row back to an empty state, and the count returns to zero.

Example 3:

COLOR_DATA = {
  "Slate": { "hex": "#708090", "category": "neutral", "rating": 2 }
}

Action: select "Slate".

Output:

1 color selected

| Color | Hex     | Category | Rating |
| Slate | #708090 | neutral  | 2      |

Explanation: A catalog with one entry still works; selecting the only option gives a count of one and a table with one row.

Constraints:

• Use React with plain CSS or any lightweight styling approach.
• The color catalog may contain between 1 and 200 entries.
• Each color value object may contain between 2 and 20 properties; your table may show any subset of at least two properties.
• The UI must handle both an empty active set and a non-empty active set.
• Deselecting a color must remove its table row and decrement the displayed count.