joboccara

const Child = () => {
  const { count, setCount } = React.useContext(CountContext);
  return (
    <div>
      <Button onClick={() => setCount((count) => count)}>
        Call setCount from context with same value
      </button>
    </div>
  );
};

joboccara

const Parent = () => {
  return (
    <Child />
  );
};

joboccara

const GrandParent = ({ children }) => {
  return (
      <div>{children}</div>
  );
};

joboccara

const CountContext = React.createContext(null);
const CountContextProvider = ({ children }) => {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <GrandParent>{children}</GrandParent>
    </CountContext.Provider>
  );
};

joboccara

const Context = () => {
  return (
    <CountContextProvider>
      <Parent />
    </CountContextProvider>
  );
};

joboccara

const App = () => {
  // ...
  return (
    <>
      <Page /*...*/ >
        <ShowComments comments ={ comments } />
      </Page>
    </>
  );
};

joboccara

const showComments = ({ comments }) => {
  console.log("Comments is rendering");
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment}>{comment}</li>
      ))}
    </ul>
  );
};

joboccara

const App = () => {
  // ...
  return (
    <>
      <Page /*...*/ >
        {showComments({ comments })}
      </Page>
    </>
  );
};

joboccara

const Page = ({ user, children, onLogin, onAddComment }) => {
  if (!user.isLoggedIn) {
    return (
      <Layout>
        <h3>Please log in to see and post comments</h3>
        <PasswordInput/>
        <button onClick={onLogin}>Login!</button>
      </Layout>
    );
  }

joboccara

const PasswordInput = () => <input type="password" />;
const CommentInput = () => <input type="text" />;