ReactJs - Why wont child event change state of parent?

Question

I have a created a menu component in reactjs. As you can see, the parent component has a method called "handleClick which toggles the "open state" of the menu, opening and closing it accordingly.

Now, I am trying to pass a click event from the child component "MenuItem" (which is a link in the menu) to the parent "Menu" component so that when one of the menu items is clicked the menu closes.

I have tried to do this in a number of ways. At the moment, I have bound the click event of each "MenuItem" in "MenuList" (the list of MenuItems) to a prop called "whenClicked" and then bound "whenClicked" to the "handleClick" method of "Menu".

The problem is that this seems to have no effect on "Menu". Neither the React tool in Chrome, nor the regular dev console are giving me any errors but the menu does not close when I click one of the MenuItems. The React tool in Chrome allows me to view the virtual DOM and I can see that all of the onClick functions are defined.

Below is the code. As you can see, I am using the same methodology to pass a click event from a different component ("MenuToggle") to "Menu". Oddly enough this works fine and clicking on the toggle button changes the state of "Menu" successfully and opens and closes the menu. I am using the "react-scroll" module for "MenuItem" so maybe that is the issue. Any light anyone can shed on this would be helpful and I would love to know what I am doing incorrectly!

var Menu = React.createClass({

    getInitialState: function() {
        return {open: false, mobi: false}
    },
    handleClick: function() {
        this.setState({open: !this.state.open})
    },
    closeOnMobiScroll: function() {
        /*
        if(this.state.mobi === false) {
            this.setState({open: false})
        }
        */
    },
    updateDimensions: function() {
        $(window).width() >= 767 ? this.setState({mobi: true}) : this.setState({mobi: false});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        $(window).on("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        $(window).on("resize", this.updateDimensions);
    },
    render: function() {
        return (

            <div id="menu" className={(this.state.open ? 'open' : '')} >
                <div id="menu-inner-wrap">
                    <MenuTitle />
                    <MenuToggle whenClicked={this.handleClick}/>
                    <MenuList whenClicked={this.handleClick}/>
                </div>
            </div>

        )
    }

});

module.exports = Menu;

var MenuItem = React.createClass({

    render: function() {
        return (
            <li className="menu-link">
                <Link to={this.props.menuLink} spy={true} smooth={true} duration={500}>
                    <i className={this.props.icon}></i>
                    <span className="menu-link-text">{this.props.menuTitle}</span>
                </Link>
            </li>
        );
    }
});

var MenuList = React.createClass({
    getInitialState: function() {
        return {data: []}
    },
    componentWillMount: function() {
        $.ajax({
            url: 'http://10.0.0.97:8888/public-code/React.cv/data/data.json',
            dataType: 'json',
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, error) {
                var err = JSON.parse(xhr.responseText);
                console.log(err.Message);
            }
        });
    },
    render: function() {
        var list = this.state.data.map(function(menuItemProps) {
            return <MenuItem onClick={this.props.whenClicked} {...menuItemProps} key={menuItemProps.id} />
        }.bind(this));
        return (
            <ul id="menu-list">
                {list}
            </ul>
        )
    }
});

Answer 1

It seems like you still need to bind the onClick to something that the DOM will handle. Adding an onClick attribute to MenuItem allows you to have a prop inside MenuItem, but you still need to bind it:

var MenuItem = React.createClass({

    render: function() {
        return (
            <li className="menu-link" onClick={this.props.onClick}>
                <Link to={this.props.menuLink} spy={true} smooth={true} duration={500}>
                    <i className={this.props.icon}></i>
                    <span className="menu-link-text">{this.props.menuTitle}</span>
                </Link>
            </li>
        );
    }
});

}

In the above example, onClick is added to the li:

<li className="menu-link" onClick={this.props.onClick}>

The best example in the documentation of behaviour like this is in Expose Component Functions.

In that example you can see that the Todo child component finally binds to div and then bubbles up in a similar way:

var Todo = React.createClass({
  render: function() {
    return <div onClick={this.props.onClick}>{this.props.title}</div>;
  },

  //this component will be accessed by the parent through the `ref` attribute
  animate: function() {
    console.log('Pretend %s is animating', this.props.title);
  }
});