Build an Accordion Component

React

JavaScript

Technical Specification

Create an accordion with multiple sections where clicking a header toggles its content.

Input/Output Samples

Input:Click a question

Output:Answer toggles open/closed

Optimal Logic Path

import { useState } from "react";

const ITEMS = [
  { id: 1, title: "Question 1", content: "Answer 1" },
  { id: 2, title: "Question 2", content: "Answer 2" }
];

function Accordion() {
  const [openId, setOpenId] = useState(null);

  function toggle(id) {
    setOpenId((current) => (current === id ? null : id));
  }

  return (
    <div>
      {ITEMS.map((item) => (
        <div key={item.id}>
          <button onClick={() => toggle(item.id)}>{item.title}</button>
          {openId === item.id && <p>{item.content}</p>}
        </div>
      ))}
    </div>
  );
}

Architectural Deep-Dive

We conditionally render the content based on which id is currently open.