Cannot read property 'refs' of null react error react js

Question

I'm using React js 0.14.3, I'm trying to create a Side Menu component using react but I don't know why I have an "Cannot read property 'refs' of null" when I use the refs like in the react documentation : https://facebook.github.io/react/docs/more-about-refs.html Can you help me please ?

'use strict';

    import React from 'react';
    import BaseComponent from './../../BaseComponent.react';
    import Menu from './SidePanelMenu';
    import MenuItem from './SidePanelMenuItem';

    class SidePanel extends BaseComponent {
        showLeft() {
            this.refs.leftmenu.show();
        }


        render() {
            return(
                <div>
                    <button onClick={this.showLeft}>Show Left Menu!</button>

                    <Menu ref="leftmenu" alignment="left">
                        <MenuItem hash="first-page">First Page</MenuItem>
                        <MenuItem hash="second-page">Second Page</MenuItem>
                        <MenuItem hash="third-page">Third Page</MenuItem>
                    </Menu>
                </div>
            );
        }
    }

    export default SidePanel;

Answer 1

You need to bind context of this.

The line where you are binding your onClick handler:

onClick={this.showLeft}

Needs to be:

onClick={this.showLeft.bind(this)}

Otherwise when you're calling showLeft it can't access this.