[Typo]: In Sharing State Between Components

[farhadjaman]

Summary

When explaining state lifting up, there's a small error in the example function for the second step : Pass hardcoded data from the common parent:

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
          Show
        </button>
      )}
    </section>
  );
}

The onClick calls setIsActive, but since there's no state declared, it should be removed.

Page

https://react.dev/learn/sharing-state-between-components

Details

No response

[rickhanlonii]

Yeah, it seems like step two could also add the onShow as a prop. It still wouldn't work, but it would flow into step three of passing the props down from the parent. Do you want to submit a PR that adds an onShow prop and passes an empty function from the parent?

[farhadjaman]

yes, I want to add a PR. Can you assign it to me?

[azurespheredev]

I agree that onClick handler calls setIsActive and it is undefined because of the lack of state declaration in the component itself. What about adding an onShow prop to the <Panel /> component?

function Panel({ title, children, isActive, onShow }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={onShow}>
          Show
        </button>
      )}
    </section>
  );
}

function ParentComponent() {
  return (
    <div>
      <Panel title="Panel Title" isActive={false} onShow={() => {}} />
    </div>
  );
}