title: React context consumer was rendered with multiple children error
body: <p>I simply try to use react provider but somehow i get this error:
  index.js:1437 Warning: A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.</p>
  
  <p>this is context.js</p>
  
  <pre><code>import React, { Component } from 'react'
      const Context=React.createContext()
      class Providerr extends Component {
      state={display:false}
      displayeditor=()=&gt;{this.setState({display:!this.state.display})  }
      render() { return (
        &lt;Context.Provider value={{...this.state,displayeditor:this.displayeditor  }}&gt;
            {this.props.children}
        &lt;/Context.Provider&gt;
      )
    }
  }
      const Consumer=Context.Consumer
  export {Providerr,Consumer}
  </code></pre>
  
  <p>I want to Consume it below</p>
  
  <pre><code>import React, { Component } from 'react'
  import {NavLink} from "react-router-dom"
  import "./leagues.scss"
  import {Consumer} from "./context.js"
  export default class Navbar extends Component {
  
    render() {
      return (
          &lt;nav className="navbar navbar-expand-lg"&gt;
             &lt;a className="navbar-brand" href="#Home"&gt;
               &lt;img src="./images/customLogo.jpg" className="navlogo"/&gt;
             &lt;/a&gt;        
             &lt;div className="collapse navbar-collapse"&gt;
               &lt;ul className="navbar-nav mx-5"&gt; 
               &lt;NavLink to="/"&gt;
               &lt;li className="nav-item active mr-5"&gt;
                 &lt;div className="nav-link"&gt;
                   &lt;span&gt;Home&lt;/span&gt;
                 &lt;/div&gt;  
               &lt;/li&gt;
               &lt;/NavLink&gt;
               &lt;Consumer&gt; {value =&gt;      
               &lt;li onClick={value.displayeditor}  className="nav-item mr-5"&gt;
                 &lt;div className="nav-link modal_lig" href=""&gt; 
                   &lt;span&gt;Leagues&lt;/span&gt;    
                 &lt;/div&gt;  
               &lt;/li&gt; }
              &lt;/Consumer&gt;
           &lt;/nav&gt;     
   )}}
  </code></pre>