Accordion

componentseasy

10:00starts when you type

Guide

Challenge mode

# Requirements status

not runstarts with every panel closed
not runshows the answer of the pressed question
not runcloses the previous panel when another one opens
not runpressing the open panel closes it
not runreports its state with aria-expanded

# Statement

Goal

Build an accordion with three questions where only one answer is open at a time. You practice state shared by several elements and conditional rendering.

What you already have

The interface of the questions: one button per item of ITEMS. Showing each answer (item.body, in a <p> below its question) is up to you.
Your job is the logic: know which panel is open and react to the buttons.
Keep the questions and answers texts from ITEMS: the tests use them.

Requirements

At the start every panel is closed.
Pressing a question shows its answer.
Pressing another question shows its answer and the previous one closes.
Pressing the question that is open closes it.
Each question reports whether its answer is open with aria-expanded.

Example

You open the challenge → you only see the three questions.
You press What is a component? → you see its answer.
You press What is state? → you see that answer and the previous one disappears.

Hints

Hint 1

Since only one panel can be open, it is enough to remember which one: store its id (or null if none).

Hint 2

Each panel's answer is shown only if its id is the open one.

Hint 3

Pressing the open question sets the open id to null.

Concepts

A single state shared by several elements.
Minimal state: one id instead of one boolean per panel.
Conditional rendering.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.