See what changed, without the noise.

−1import { useMemo } from "react";2 3type Member = {4  id: number;5  name: string;−6  role: string; 7};8 9const team: Member[] = [−10  { id: 1, name: "Maya", role: "Designer" },−11  { id: 2, name: "Noah", role: "Engineer" }, 12];13 14export function TeamList() {−15  const members = useMemo(() => team, []);    16 17  return (−18    <section className="team">−19      <h2>Our team</h2>     20      {members.map((member) => (−21        <p key={member.id}>{member.name}</p>22      ))}23    </section>24  );25}

+1import { useMemo, useState } from "react";2 3type Member = {4  id: number;5  name: string;+6  role: "Designer" | "Engineer";+7  available: boolean;8};9 10const team: Member[] = [+11  { id: 1, name: "Maya", role: "Designer", available: true },+12  { id: 2, name: "Noah", role: "Engineer", available: false },+13  { id: 3, name: "Lina", role: "Engineer", available: true },14];15 16export function TeamList() {+17  const [showAll, setShowAll] = useState(false);+18  const members = useMemo(+19    () => (showAll ? team : team.filter((member) => member.available)),+20    [showAll],+21  );22 23  return (+24    <section className="team" aria-labelledby="team-title">+25      <div className="team__heading">+26        <h2 id="team-title">Meet the team</h2>+27        <button onClick={() => setShowAll((value) => !value)}>+28          {showAll ? "Show available" : "Show everyone"}+29        </button>+30      </div>31      {members.map((member) => (+32        <p key={member.id}>{member.name} · {member.role}</p>33      ))}34    </section>35  );36}