Please carefully look up to this here as setIsActive is not defined yet but called inside code at line 163

[KishorKumarParoi]

Please carefully look up to this here setIsActive is not defined yet at line 163, isActive is only passing by props from Accordion, I know that what I did it's not best solution,I added this lines for proper understanding and updated setIsActive to setCheckActive to remove errors, Please take necessary steps so that learners like myself don't get confused by ReferenceError of variables which isn't declared yet and got curious about why it was like that

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-dev	✅ Ready (Inspect)	Visit Preview	Feb 25, 2024 10:21am

[github-actions[bot]]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[pwbriggs]

Hey there @KishorKumarParoi! 👋

The error in this code is intentional. It's showing the second step of a 3-step refactoring to lift state up.

That said, I agree that this may be confusing. Perhaps it would be a good idea to add a comment next to the confusing code? Something like this:

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
        // 👆 This onClick handler doesn't work yet, because we removed setIsActive in step 1
          Show
        </button>
      )}
    </section>
  );
}

What do you think?

[KishorKumarParoi]

Hey there @KishorKumarParoi! 👋

The error in this code is intentional. It's showing the second step of a 3-step refactoring to lift state up.

That said, I agree that this may be confusing. Perhaps it would be a good idea to add a comment next to the confusing code? Something like this:

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
        // 👆 This onClick handler doesn't work yet, because we removed setIsActive in step 1
          Show
        </button>
      )}
    </section>
  );
}

What do you think?

Yes I am agreed with you

[pwbriggs]

@KishorKumarParoi how about you update the PR with these changes then?

[KishorKumarParoi]

@KishorKumarParoi how about you update the PR with these changes then?

Updated Thank you

[Mavludin]

Hope this one is going to be merged soon