title: i'm get this error, i don't know what to do, "TypeError: render is not a function"
body: <p>okay, so i'm new to the react world, and i was learning about the react useContext, i followed exactly what a tutorial on youtube did,  i'm trying to build a little project, i tried following his steps and then i hit an error while trying to use the state i literally want it to be accessible accross my app components, inside my app i've created various componenents and also various responsibility that combines all the reusuable components and do a specific task with it. i'm now trying to access my context from my <code>GETCLICKEDIMAGES</code> file, below are my steps</p>
  <pre><code>StateContext.jsx file
  
      import React, { useState, createContext  } from &quot;react&quot;;
  
  export const StateContext = createContext();
  
  export const StateProvider=(props)=&gt; {
    //all the components in this app will share this state.
    const [names, setNames] = useState([{ name: &quot;Zucci Daniel! its working&quot; }]);
  
    return (
      &lt;StateContext.Provider value={&quot;helo&quot;}&gt;{props.children}&lt;/StateContext.Provider&gt;
    );
  }
  
  
  
  App.js
  
      import React, { Component } from &quot;react&quot;;
  import BigWrapper from &quot;./justComponents/BigWrapper/BigWrapper&quot;;
  import NavBar from &quot;./justComponents/NavBar/NavBar&quot;;
  import MainContainer from &quot;./justComponents/MainContainer/MainContainer&quot;;
  //below are the various responsibilities component
  import SEARCHANDDISPLAY from &quot;./Responsibilities/SEARCHANDDISPLAY/SEARCHANDDISPLAY&quot;;
  import { GETCLICKEDIMAGES } from &quot;./Responsibilities/GETCLICKEDIMAGES/GETCLICKEDIMAGES&quot;;
  
  import { StateContext } from &quot;./StateContext/StateContext&quot;;
  
  class App extends Component {
    render() {
      return (
        &lt;StateContext&gt;
          &lt;BigWrapper&gt;
            &lt;NavBar /&gt;
  
            &lt;MainContainer&gt;
              &lt;SEARCHANDDISPLAY /&gt;
              &lt;GETCLICKEDIMAGES /&gt;
            &lt;/MainContainer&gt;
          &lt;/BigWrapper&gt;
        &lt;/StateContext&gt;
      );
    }
  }
  
  export default App;
  
  
  GETCLICKEDIMAGE.jsx 
  
      import React,{useContext} from &quot;react&quot;;
  import ClickedImageHolderDiv from &quot;../../justComponents/ClickedImageHolderDiv/ClickedImageHolderDiv&quot;;
  import Figure from &quot;../../justComponents/Figure/Figure&quot;;
  //you wanna use the stateContext right? import the context here as so;
  import { StateContext } from &quot;../../StateContext/StateContext&quot;;
  //this is responsible for getting the clicked images and displaying them in full details
  
  /**
   a DIV to hold the FIGURE 
   */
  export const GETCLICKEDIMAGES=()=&gt; {
  
    const value =useContext(StateContext);
  
  
  
    return (
      &lt;ClickedImageHolderDiv&gt;
        &lt;h2&gt;{value}&lt;/h2&gt;
        &lt;Figure useThisStyle={{ height: &quot;100%&quot; }} /&gt;
      &lt;/ClickedImageHolderDiv&gt;
    );
  }
  </code></pre>
  <p>i don't know if i'm missing something, or something's changed, pls help.</p>