fandro fandro - 23 days ago 6
React JSX Question

Cannot read property 'refs' of null react error react 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

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.