Local State

State belonging to one component/context.

html

<div class="lclst">
  <p class="lclst__hint">Two independent &lt;Counter&gt; instances &mdash; each owns its own count.</p>
  <div class="lclst__row">
    <div class="lclst__box" style="border-color:#F5C2E0;"><small>Counter A</small><strong>2</strong></div>
    <div class="lclst__box" style="border-color:#F5C2E0;"><small>Counter B</small><strong>7</strong></div>
  </div>
</div>
<style>
.lclst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.lclst__hint { margin: 0 0 12px; font-size: 11px; color: #24143099; }
.lclst__row { display: flex; gap: 10px; }
.lclst__box { flex: 1; border: 2px solid; border-radius: 10px; padding: 12px; text-align: center; }
.lclst__box small { display: block; font-size: 10px; color: #24143099; margin-bottom: 6px; }
.lclst__box strong { font-size: 24px; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 text-[11px] text-[#24143099]">Two independent &lt;Counter&gt; instances &mdash; each owns its own count.</p>
  <div class="flex gap-2.5">
    <div class="flex-1 border-2 rounded-[10px] p-3 text-center" style="border-color:#F5C2E0;"><small class="block text-[10px] text-[#24143099] mb-1.5">Counter A</small><strong class="text-2xl">2</strong></div>
    <div class="flex-1 border-2 rounded-[10px] p-3 text-center" style="border-color:#F5C2E0;"><small class="block text-[10px] text-[#24143099] mb-1.5">Counter B</small><strong class="text-2xl">7</strong></div>
  </div>
</div>

react

export function LocalState({
  componentLabel = "Counter",
  countA = 2,
  countB = 7,
  accent = "#F5C2E0",
}) {
  const box = { flex: 1, border: `2px solid ${accent}`, borderRadius: 10, padding: 12, textAlign: "center" };
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontSize: 11, color: "#24143099" }}>Two independent &lt;{componentLabel}&gt; instances &mdash; each owns its own count.</p>
      <div style={{ display: "flex", gap: 10 }}>
        <div style={box}><small style={{ display: "block", fontSize: 10, color: "#24143099", marginBottom: 6 }}>{componentLabel} A</small><strong style={{ fontSize: 24 }}>{countA}</strong></div>
        <div style={box}><small style={{ display: "block", fontSize: 10, color: "#24143099", marginBottom: 6 }}>{componentLabel} B</small><strong style={{ fontSize: 24 }}>{countB}</strong></div>
      </div>
    </div>
  );
}