Why is there a syntax error in my React component class?

Question

I have a syntax error in my code, and I'm not sure why. Does it have to do with the way I used refs?

export default class ToggleMenu extends React.Component {

  showRight: function() {
    this.refs.right.show();
  }

  render() {
    return (
      <div>
      <button onClick={this.showRight}>Show Left Menu!</button>
      {/*  
        <Menu ref="right" alignment="right">
          <MenuItem hash="1">First</MenuItem>
          <MenuItem hash="2">Second</MenuItem>
          <MenuItem hash="3">Third</MenuItem>
        </Menu> 
      */}
      </div>
    );
  }
}

Here is the error:

./src/components/ToggleMenu/ ToggleMenu.js Module build failed: SyntaxError: Unexpected token (13:14)

showRight: function() {
  this.refs.right.show();  
}

Answer 1

You're getting object literals and classes mixed up. Your code is inside a class, not an object literal, so you must use method definition syntax like you did with render. Classes can only contain prototypal methods and a constructor (as of ECMAScript 2015):

showRight() {
  this.refs.right.show();
}

Or else it will be interpreted as a label and a function declaration, but function declarations with the function keyword cannot be in class bodies thus the syntax error:

showRight: //label
function() { //function declaration, not valid in class body!
    ...
}

Also, make sure to bind(this) to your methods so that this refers to the component and not the global scope's this value:

constructor(props) {
  super(props);
  this.showRight = this.showRight.bind(this);
}

Read more about class bodies at MDN.

---

Regarding your use of refs, you should use a callback instead of a plain string:

<Menu ref={right => this.right = right} alignment="right">

Then in your showRight:

this.right.hide();