Cannot assign a function on onClick property of React with Typescript

Question

I'm trying to rewrite Chess Game from FB React tutorial using Typescript.

It's a long journey and quite challenging. I got this:

ERROR in ./src/Game.tsx
(79,15): error TS2322: Type '{ className: "square"; onClick: "{this.handleClick}"; }' is not assignable to type 'HTMLProps<HTMLButtonElement>'.
  Types of property 'onClick' are incompatible.
    Type '"{this.handleClick}"' is not assignable to type 'EventHandler<MouseEvent<HTMLButtonElement>>'.

This is my source code:

interface SquareProps extends React.Props<{}> {
}
interface SquareState {
    value: string
}
class Square extends React.Component<SquareProps, SquareState> {
  constructor(props: SquareProps) {
    super(props)
    this.state = { value: null }

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(): void {
    this.setState({value: 'X'})
  }

  render() {
    return (
      <button className="square" onClick="{this.handleClick}">
        {this.state.value}
      </button>
    );
  }
}

This is my package.json

{
  "name": "typescript-react-webpack",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --module-bind 'css=style!css'",
    "webpack-watch": "webpack --progress --colors --watch --module-bind 'css=style!css'",
    "start": "serve"
  },
  "devDependencies": {
    "serve": "^5.1.4",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.6",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "@types/react": "^15.0.23",
    "@types/react-dom": "^15.5.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

What am I doing wrong here?

Nitzan Tomer · Accepted Answer · 2017-05-02 03:37:33Z

7

It should be:

render() {
    return (
        <button className="square" onClick={ this.handleClick }>
            {this.state.value}
        </button>
    );
}

The difference being that the onClick value shouldn't be surrounded by quotes.
The quotes makes it a string instead of a reference to the method.

answered May 2, 2017 at 3:37

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sancho21 Over a year ago

OMG. You've just saved my day. It was a stupid newbie question. Thanks!

Nitzan Tomer Over a year ago

Sure thing. I also missed that you bound the method in ctor, I edited and removed that part of my answer

Collectives™ on Stack Overflow

Cannot assign a function on onClick property of React with Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related