CODEWITHSUNDEEP
javascriptreactjs
Ryan Callahan
Ryan Callahan

Reputation: 115

How to pass a click handler to a child component

I'm trying to pass a click handler function to a child component but I cant figure out why its not working.

I tried making my click handler into a lambda function, binding it to the parent component, and making my onClick in the child component a lambda function but nothing seems to work.

Parent Component

import React from 'react';
import NavMenuButton from './navMenuButton.js';

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            navBarOpen: true
        };
        this.toggleNavbar = this.toggleNavbar.bind(this);
    }

    toggleNavbar() {
        console.log('Toggled!');
        this.setState({
            navBarOpen: this.state.navBarOpen ? false : true
        });
    }

    render() {
        return (
            <NavMenuButton
                handleClick={this.toggleNavBar}
                navBarOpen={this.state.navBarOpen}
            />
        );
    }
}

Child Component

import React from 'react';

export default class NavMenuButton extends React.Component{
    constructor(props){
        super(props)
    }

    render(){

        const styles = {
            navButton: this.props.navBarOpen 
            ? {fontSize:26, cursor:'pointer', userSelect:'none'} 
            : {fontSize:26, cursor:'pointer', userSelect:'none'}
        }

        return(
            <div>
                <span
                    style={styles.navButton} 
                    onClick={this.props.handleClick}
                    >
                    {'\u2630'}
                </span>
                {this.props.navBarOpen 
                 ? <p>its open</p>
                 : <p>its closed</p>}
            </div>
        );
    }
}

This configuration is what I thought should work, but if I log the props in navMenuButton to the console, handleClick is undefined which really confuses me

Upvotes: 0

Views: 104

Answers (1)

Deryck
Deryck

Reputation: 7658

toggleNavBar !== toggleNavbar - case sensitivity is very important :)

Upvotes: 4

Related Questions