From 780259a3b963eed43d3a839a4726c149e6092f08 Mon Sep 17 00:00:00 2001
From: Batuhan Tomo <batuhan.tomo@gmail.com>
Date: Mon, 1 Jul 2024 10:42:04 +0300
Subject: [PATCH] chore: Refactor Accordion component to use state hook for
 panel activation

---
 src/content/learn/sharing-state-between-components.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 52eaf28f85d..5543c661992 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -133,27 +133,29 @@ In this example, it's the `Accordion` component. Since it's above both panels an
 import { useState } from 'react';
 
 export default function Accordion() {
+  const [isActive, setIsActive] = useState(false);
+
   return (
     <>
       <h2>Almaty, Kazakhstan</h2>
-      <Panel title="About" isActive={true}>
+      <Panel title="About" isActive={isActive} onShow={() => setIsActive(true)}>
         With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
       </Panel>
-      <Panel title="Etymology" isActive={true}>
+      <Panel title="Etymology" isActive={isActive} onShow={() => setIsActive(true)}>
         The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
       </Panel>
     </>
   );
 }
 
-function Panel({ title, children, isActive }) {
+function Panel({ title, children, isActive, onShow }) {
   return (
     <section className="panel">
       <h3>{title}</h3>
       {isActive ? (
         <p>{children}</p>
       ) : (
-        <button onClick={() => setIsActive(true)}>
+        <button onClick={onShow}>
           Show
         </button>
       )}