title: Faced TypeError: render is not a function when using Context API
body: <p>I am new to React ans was learning Context API and during the use of it I faced this error TypeError: render is not a function. I also found the this answer <a href="https://stackoverflow.com/questions/54304594/react-context-typeerror-render-is-not-a-function">React Context: TypeError: render is not a function</a> in the platform which is close to my problem but no result. Here is the code I am using:</p>
  
  <pre><code>import React, { Component } from "react";
  import MyContext from "../../Containers/Context/Context";
  class Track extends Component {
    render() {
      return (
        &lt;MyContext&gt;
          {value =&gt; {
            return &lt;div&gt;{value.heading}&lt;/div&gt;;
          }}
        &lt;/MyContext&gt;
      );
    }
  }
  
  export default Track;
  </code></pre>
  
  <hr>
  
  <pre><code>import React, { Component } from "react";
  
  const Context = React.createContext();
  
  export class MyContext extends Component {
    state = { track_list: [], heading: "Top Ten Tracks" };
    render() {
      return (
        &lt;Context.Provider value={this.state}&gt;
          {this.props.children}
        &lt;/Context.Provider&gt;
      );
    }
  }
  
  export default MyContext = Context.Consumer;
  </code></pre>
  
  <hr>
  
  <pre><code>import React, { Component, Fragment } from "react";
  import "./App.css";
  import Header from "../src/Components/Header/Header";
  import Search from "../src/Components/Search/Search";
  import Tracks from "../src/Components/Tracks/Tracks";
  import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
  import NotFound from "./Components/NotFound/NotFound";
  import MyContext from "./Containers/Context/Context";
  
  class App extends Component {
    render() {
      return (
        &lt;MyContext&gt;
          &lt;Router&gt;
            &lt;Fragment&gt;
              &lt;Header /&gt;
              &lt;div className="container"&gt;
                &lt;Search /&gt;
                &lt;Switch&gt;
                  &lt;Route exact path="/" component={Tracks} /&gt;
                  &lt;Route component={NotFound} /&gt;
                &lt;/Switch&gt;
              &lt;/div&gt;
            &lt;/Fragment&gt;
          &lt;/Router&gt;
        &lt;/MyContext&gt;
      );
    }
  }
  
  export default App;
  </code></pre>