React context consumer was rendered with multiple children error - reactjs

Question

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.
this is context.js
import React, { Component } from 'react'
const Context=React.createContext()
class Providerr extends Component {
state={display:false}
displayeditor=()=>{this.setState({display:!this.state.display}) }
render() { return (
<Context.Provider value={{...this.state,displayeditor:this.displayeditor }}>
{this.props.children}
</Context.Provider>
)
}
}
const Consumer=Context.Consumer
export {Providerr,Consumer}
I want to Consume it below
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 (
<nav className="navbar navbar-expand-lg">
<a className="navbar-brand" href="#Home">
<img src="./images/customLogo.jpg" className="navlogo"/>
</a>
<div className="collapse navbar-collapse">
<ul className="navbar-nav mx-5">
<NavLink to="/">
<li className="nav-item active mr-5">
<div className="nav-link">
<span>Home</span>
</div>
</li>
</NavLink>
<Consumer> {value =>
<li onClick={value.displayeditor} className="nav-item mr-5">
<div className="nav-link modal_lig" href="">
<span>Leagues</span>
</div>
</li> }
</Consumer>
</nav>
)}}

Answer 1

Wrap the whole code inside Consumer as shown below. Also note that some of your html elements are not properly closed.
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(
<Consumer>
{value => (
<nav className="navbar navbar-expand-lg">
<a className="navbar-brand" href="#Home">
<img src="./images/customLogo.jpg" className="navlogo"/>
</a>
<div className="collapse navbar-collapse">
<ul className="navbar-nav mx-5">
<NavLink to="/">
<li className="nav-item active mr-5">
<div className="nav-link">
<span>Home</span>
</div>
</li>
</NavLink>
<li onClick={()=>value.displayeditor()} className="nav-item mr-5">
<div className="nav-link modal_lig" href="">
<span>Leagues</span>
</div>
</li>
</ul>
</div>
</nav>
)}
</Consumer>
)
}
}