Solution

You'll hold the chosen color in useState and let it drive the preview, the hex label, and the ring together.

The problem, in plain English

Six swatches, one preview. Clicking a swatch should recolor the preview, update the hex text, and highlight the swatch you picked. The trap is treating those as three separate things to update on every click. They're one thing — selected — rendered three ways.

The mental model

Keep exactly one piece of state: the currently selected color. Everything visible is a function of it. The preview background is selected, the label text is selected, and a swatch is ringed when its own color equals selected. Change the one value and React re-renders all three; there's no per-swatch "am I selected" flag to keep in sync.

A first attempt

A common first try reaches into the DOM to recolor things by hand:

function handleClick(e) {
  const preview = document.querySelector('.preview');
  preview.style.background = e.currentTarget.style.background; // imperative poke
}

The preview even recolors. But there's no state, so the hex label never updates, the ring can't move (which swatch is selected?), and nothing else in the component can ask "what's chosen?". In React the DOM should be a consequence of state, not the place you store it.

The working solution

import { useState } from 'react';
import './styles.css';

const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899'];

export default function App() {
  const [selected, setSelected] = useState(COLORS[0]);

  return (
    <main className="container">
      <h1>Color Swatch Picker</h1>

      <div className="preview" style={{ background: selected }} aria-hidden="true" />
      <p className="hex" aria-live="polite">{selected}</p>

      <div className="swatches" role="group" aria-label="Choose a color">
        {COLORS.map((c) => (
          <button
            key={c}
            type="button"
            className={c === selected ? 'swatch selected' : 'swatch'}
            style={{ background: c }}
            aria-label={`Select ${c}`}
            aria-pressed={c === selected}
            onClick={() => setSelected(c)}
          />
        ))}
      </div>
    </main>
  );
}

selected is the single source of truth. Each swatch's onClick sets it to that swatch's color. The preview, label, ring, and aria-pressed all derive from the value during the same render. The palette remains a constant because clicking never changes the available colors.

Walking through one interaction

• Load: selected = '#ef4444' → preview red, label #ef4444, ring on the red swatch.
• Click green: setSelected('#22c55e') → re-render → preview green, label #22c55e, and now c === selected is true only for the green swatch, so the ring moves there.
• The previously selected swatch loses the ring automatically — nothing to clean up.

Gotchas

• A selected flag per swatch — storing "am I picked?" on each swatch means clearing the old one on every click. Derive the ring from one selected value instead.
• Recoloring the DOM by hand — preview.style.background = ... skips the label and the ring. Drive them all from state.
• Comparing the wrong thing — the ring test is c === selected (color to color); comparing indices works too but breaks if the palette is reordered.
• Visual-only selection — a ring does not announce itself. Bind aria-pressed={c === selected} to expose the same state to assistive technology.

Going further

• Controlled prop — accept value + onChange props so a parent owns the selection (the standard controlled-input pattern).
• Keyboard roving — arrow-key navigation across the swatches to match the APG radio-group pattern.
• Custom colors — add an <input type="color"> that feeds into the same selected state.

Alternative solutions

import { useReducer } from 'react';
import './styles.css';

const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899'];

function chooseColor(_current: string, next: string): string {
  return next;
}

export default function App() {
  const [selected, select] = useReducer(chooseColor, COLORS[0]);

  return (
    <main className="container">
      <h1>Color Swatch Picker</h1>
      <div className="preview" style={{ background: selected }} aria-hidden="true" />
      <p className="hex" aria-live="polite">{selected}</p>
      <div className="swatches" role="group" aria-label="Choose a color">
        {COLORS.map((color) => {
          const active = color === selected;
          return (
            <button
              key={color}
              type="button"
              className={active ? 'swatch selected' : 'swatch'}
              style={{ background: color }}
              aria-label={`Select ${color}`}
              aria-pressed={active}
              onClick={() => select(color)}
            />
          );
        })}
      </div>
    </main>
  );
}