Getting this.props is not function when passes function to child React

Question

I want to pass a function from parent (PendingRides) to child( ThirdSidebar)

But getting error _this.props.onclk is not a function.I have bind the function with this but still getting error.

class PendingRides extends React.Component {
          //Parent Class
constructor(props) {
    super(props);
    this.switchclk=this.switchclk.bind(this);
    this.state={
        clk:false
    }
}


switchclk = (status)=>{

    console.log("Here2");
    this.setState({clk:status})

};

render(){


    return(

        <div>
            <ThirdSidebar onclk={this.switchclk}/>  // passing function to child

            {this.state.clk ?
                <div>
                <div className="layout-content">
                    <div className="layout-content-body">
                    </div>
                </div>

                </div>
            :null}



        </div>

    )
}

}

class ThirdSidebar extends React.Component{

constructor(props){
    super(props);
    this.showRides=this.showRides.bind(this);
    this.state={

    }
}

showRides = (e)=>{

    e.preventDefault();
    console.log("Here1");
    this.props.onclk(true)

};

render(){

    let hreflink=null;

    return(
        <div>
                <div className="layout-main"> {/*---------------------- sidebar ----------------------- */}
                    <div className="layout-sidebar">
                        <div className="layout-sidebar-backdrop">
                        </div>
                        <div className="layout-sidebar-body">
                            <div className="custom-scrollbar">
                                <nav id="sidenav" className="sidenav-collapse collapse">

                                            <ul className="sidenav-subnav">
                                                <li className="sidenav-subheading">Dashboards</li>
                                                <li onClick={(e)=>this.showRides(e)} className="active"><a href={hreflink}>Pending Rides</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>

                </div> {/* sidebar ends */}

            </div>

        </div>
    )
}

}

export default ThirdSidebar

When the user clicks on pending rides it calls the function of showRides,where I am receiving props and getting error in child component

Once I fix the mismatched JSX in ThirdSidebar, the code works fine as-is: codesandbox.io/s/4xz4q1l9z4 — user5734311
– user5734311, Commented Jun 24, 2019 at 9:51

ravibagul91 · Accepted Answer · 2019-06-24 10:15:02Z

1

In your PendingRides component your switchclk function should be this,

switchclk(status){ //Remove arrow function

    console.log("Here2");
    this.setState({clk:status})

};

In your ThirdSidebar component your showRides function should be this,

showRides(e){ //Remove arrow function

    e.preventDefault();
    console.log("Here1");
    this.props.onclk(true)

};

Call above function like this,

<li onClick={this.showRides} className="active"><a href={hreflink}>Pending Rides</a></li>

Note: How to use arrow functions

Working Demo

edited Jun 24, 2019 at 10:15

answered Jun 24, 2019 at 9:57

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Nabeel Over a year ago

TypeError: this.props.onclk is not a function,

ravibagul91 Over a year ago

@MuhammadNabeel also check for JSX closing tag issues in ThirdSidebar component.

Radonirina Maminiaina · Accepted Answer · 2019-06-24 09:48:19Z

0

If you use arrow function you don't need to bind your function anymore. Actually, arrow function is an equivalent of bind().

Remove your bind line:

this.showRides = this.showRides.bind(this); // to remove

Or change arrow function with:

showRides (e) {

    e.preventDefault();
    console.log("Here1");
    this.props.onclk(true)

};

answered Jun 24, 2019 at 9:48

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Collectives™ on Stack Overflow

Getting this.props is not function when passes function to child React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related