React Context API + hook

Question

I am fairly new to Context API. So bassicaly, I want when I press on the Button in the ButtonComponent everything in ButtonComponent disapears as well in ImageComponent but when I click on the Button nothing happens. I am kind of stuck with this I would be very grateful if I got someone to help me if possible. Thanks in Advance!

//HiddenContext
import React from "react";
export const HiddenContext = React.createContext(false);

function HiddenProvider({ children }) {
  const [hideButton, setHideButton] = React.useState(false);

  function handleClick() {
    setHideButton(true);
  }

  return (
    <HiddenContext.Provider value={{ hideButton, handleClick }}>
      {children}
    </HiddenContext.Provider>
  );
}


// App Component/Parent
import React, { useState } from 'react';
import './App.css';
export const HiddenContext = React.createContext(false);
function HiddenProvider({ children }) {
  const [hideButton, setHideButton] = React.useState(false);

  function handleClick() {
    setHideButton(true);
  }

  return (
    <HiddenContext.Provider value={{ hideButton, handleClick }}>
      {children}
    </HiddenContext.Provider>
  );
}

 function App() {
  const { hideButton } = React.useContext(HiddenContext);
  return (
    <HiddenProvider>
      <div className="App">
        <ImageComponent hideButton={hideButton} /> 
      </div>
    </HiddenProvider>
  );
}


//ButtonComponent
import React, {useState,ReactFragment} from 'react'
import { HiddenContext, } from './HiddenContext';
function ButtonComponent() {
  const { hideButton, handleClick } = React.useContext(HiddenContext);

  return (
    <React.Fragment>
      {!hideButton && (
        <li>
          <img className="image" src="./icons" alt="" />
          <Button
            onClick={handleClick}
            variant="outlined"
            className="button__rightpage"
          >
            Hide
          </Button>
          <caption className="text"> Hide</caption>
        </li>
      )}
    </React.Fragment>
  );
}

// ImageComponent
import React, {useState, ReactFragment} from 'react'
import { HiddenContext, } from './HiddenContext';
const ImageComponent = () => {
  const { hideButton } = React.useContext(HiddenContext);
  return (
    <div>
      {!hideButton && (
        <React.Fragment>
          <img src="icons/icon.png" alt="" />
          <caption>Image </caption>
        </React.Fragment>
      )}
    </div>
  );
};

Answer 1

You are trying to access the context value outside the provider (in App ). Try to remove this from App , like so:

 function App() {
   return (
     <HiddenProvider>
       <div className="App">
           <ImageComponent  /> 
       </div>
     </HiddenProvider>
   );
}

Answer 2

We created here 2 context - instead of 1

I make a codesendbox for us to see the fix.

https://codesandbox.io/s/focused-night-i95fr

We should create context only one time, to wrap the App component with the provider, and we can use this context like you did wherever we want

And relative to the beginner, it seems from your code that you understand what you are doing

about your comment - attached a pic