title: React Context API/Hooks
body: <p>I am fairly new to Context API. Basically, I want to when I press on the Button in the ButtonComponent that button disappears as well as everything in the ImageComponent but I am getting this error (TypeError: render is not a function updateContextConsumer). Quick note The button is rendered in the Sidebar Component. I am kind of stuck on this error/bug and I would be very grateful if I got someone's help if possible.</p>
  <pre><code>
  
  HiddenContext
  import React, { useState } from 'react';
  export const HiddenContext =React.createContext(false)
  
  function HiddenProvider ({children}) {
      const[hideButton, setHideButton]= React.useState(false)
  
  function handleClick (){
      setHideButton(true)
  }
  
  return(
      &lt;HiddenContext.Provider value ={{hideButton,handleClick}}&gt;
          {children}
      &lt;/HiddenContext.Provider&gt;
  );
  }
  
  
  
  import React, { useState } from 'react';
  import './App.css';
  import Sidebar from './Sidebar';
  import ImageComponent from './ImageComponent';
  import { HiddenContext, } from './HiddenContext';
  
  
  
  function App() {
    
   const{ hideButton}=React.useContext(HiddenContext)
    
  
    return (
      &lt;div className=&quot;App&quot;&gt;  
         &lt;Sidebar /&gt;
          &lt;HiddenContext&gt;
           &lt;ImageComponent hideButton={hideButton}   /&gt;
          &lt;/HiddenContext&gt;                            
      &lt;/div&gt;
          
     );    
  }
  
  export default App;
  
  
  
  ImageComponent
  import React, {useState, ReactFragment} from 'react'
  import {
      BrowserRouter as Router,
       Link
    } from &quot;react-router-dom&quot;;
  import { HiddenContext, } from './HiddenContext';
  
  
  const ImageComponent=()=&gt;{
  const { hideButton } = React.useContext(HiddenContext);
   
    return (
          &lt;div&gt;
             
             {!hideButton &amp;&amp;  (  
             &lt;React.Fragment&gt;
             &lt;Router&gt;
             &lt;Link className=&quot;google&quot;
             onClick={() =&gt; {
             window.location.href = 'https://google.com/';
             }}&gt;   
             &lt;img src=&quot;./icons/icons8-google-48.png&quot; alt=&quot;Google&quot;/&gt;
             &lt;figcaption&gt;Image&lt;/figcaption&gt;
             &lt;/Link&gt;
             &lt;/Router&gt;
             &lt;/React.Fragment&gt;)}
              &lt;/div&gt;
              )
                }
          
  
  ButtonComponent
  import React, {useState, ReactFragment} from 'react'
  const ButtonComponent =()=&gt;
  const { hideButton, handleClick } = React.useContext(HiddenContext);
      return(
        &lt;div&gt;
        &lt;React.Fragment&gt;
       {!hideButton &amp;&amp;(
      &lt;li&gt;
      &lt;img className=&quot;image&quot;src=&quot;./icons/icons8-button-48.png&quot;/&gt;
      &lt;Button onClick={handleClick} variant=&quot;outlined&quot; className=&quot;button__rightpage&quot; &gt;Button&lt;/Button&gt;
      &lt;caption className=&quot;text&quot;&gt; Button&lt;/caption&gt;
      &lt;/li&gt;)}
      &lt;/React.Fragment&gt;
        &lt;/div&gt;
  )
  }
  
  
  
  
  
  </code></pre>