Sorry, I should have been more direct.

example:

<ColorSelectorButton color="blue"

inside ColorSelector we access the hex value: selectedThreadColors[props.color] which would return the hex value.

selectedThreadColors[0] doesn't tell me what color this color selector is.

Thanks for catching that! It looks like the color aren't appearing in the order intended. I naively assumed that the order was preserved.

It looks like one way we can approach this is something like:

const selectedThreadColors = Object.entries(selectedThreadColorsObj).sort((a, b) => a[1] - b[1]).map((each) => each[0]);

Inspired by https://stackoverflow.com/a/37607084

I'll update this diff with the change

Actually, I'll make this a new diff since it seems like there's a few ways to approach this and there may be some discussion. Also to unblock and land the rest of the accepted stack.

That's a fair point, but the colors were chosen arbitrarily and don't necessarily map cleanly to "English" names.

I agree that colors should usually be labeled, but it'd be difficult in this case. Open to any ideas though

That makes sense, thanks!