Acordeón

Crea un acordeón con tres preguntas en el que solo haya una respuesta abierta a la vez. Practicas el estado compartido por varios elementos y el renderizado condicional.

• La interfaz de las preguntas: un botón por cada elemento de ITEMS. Mostrar cada respuesta (item.body, en un <p> debajo de su pregunta) te toca a ti.
• Tu trabajo es la lógica: saber qué panel está abierto y reaccionar a los botones.
• Conserva los textos de las preguntas y las respuestas de ITEMS: los usan los tests.

• Al empezar, todos los paneles están cerrados.
• Pulsar una pregunta muestra su respuesta.
• Pulsar otra pregunta muestra su respuesta, y la anterior se cierra.
• Pulsar la pregunta que está abierta la cierra.
• Cada pregunta indica con aria-expanded si su respuesta está abierta.

• Abres el reto → solo ves las tres preguntas.
• Pulsas What is a component? → ves su respuesta.
• Pulsas What is state? → ves esa respuesta y la anterior desaparece.

• Un solo estado compartido por varios elementos.
• Estado mínimo: un id en lugar de un booleano por panel.
• Renderizado condicional.