CODEWITHSUNDEEP
reactjsconsumer
Tolima
Tolima

Reputation: 117

React context consumer was rendered with multiple children error

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>     
 )}}

Upvotes: 8

Views: 17794

Answers (1)

lomse
lomse

Reputation: 4165

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>
        )
    }
}

Upvotes: 10

Related Questions