close

[Solved] TypeScript interface signature for the onClick event in ReactJS

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error TypeScript interface signature for the onClick event in ReactJS in reactJs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve TypeScript interface signature for the onClick event in ReactJS Error ?

  1. How To Solve TypeScript interface signature for the onClick event in ReactJS Error ?

    To Solve TypeScript interface signature for the onClick event in ReactJS I would just () => void i.e. a function that takes no arguments and you don't care if it returns anything.

  2. TypeScript interface signature for the onClick event in ReactJS

    To Solve TypeScript interface signature for the onClick event in ReactJS I would just () => void i.e. a function that takes no arguments and you don't care if it returns anything.

Solution 1

The interface with props should be

interface IProps_Square {
  message: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

Notice also that if you use semicolons, the interface items separator is a semicolon, not a comma

Solution 2

I would just () => void i.e. a function that takes no arguments and you don’t care if it returns anything.

import * as React from 'react';   
import * as ReactDOM from 'react-dom'; 

interface IProps_Square {
  message: string,
  onClick: () => void,
}

class Square extends React.Component < IProps_Square > {
   render() {  
     return (
       <button onClick={this.props.onClick}>
         {this.props.message}
       </button>
     );
   }
}

class Game extends React.Component {
  render() {
    return (
      <Square
         message = { 'click this' }
         onClick = { () => alert('hello') }
      />
    );
  }
}

ReactDOM.render(
  <Game />, 
  document.getElementById('reactjs-tutorial')   
); 

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment