import { forwardRef } from "react";
import { Box } from "@chakra-ui/react";
import { HiOutlineMenu } from "react-icons/hi";

type THamburgerProps = React.ComponentPropsWithoutRef<"button">;

const Hamburger = forwardRef<HTMLButtonElement, THamburgerProps>(
  ({ ...props }, ref) => {
    return (
      <Box
        as="button"
        ref={ref}
        type="button"
        p="1"
        fontSize="2xl"
        color="gray.600"
        display={{ base: "block", lg: "none" }}
        {...props}
      >
        <HiOutlineMenu />
      </Box>
    );
  }
);

Hamburger.displayName = "Hamburger";

function App() {
  return <Hamburger onClick={() => console.log("hamburger clicked!")} />;
}

You can use the ComponentProps utility type from react. This utility type can be used on both html5 nodes and components from other libraries to lessen the code that you are typing. It also gives you access to all the props that you can pass to the native nodes. The usage is something like this: import { type ComponentProps } from 'react' // You can use any valid html5 here for the generic type ProductCardProps = ComponentProps<'div'> & { // insert your custom properties here title: string, } Sorry for formatting, I'm on mobile. Edit: typos and details

import { forwardRef } from "react";
import { Box } from "@chakra-ui/react";
import { HiOutlineMenu } from "react-icons/hi";

type THamburgerProps = React.ComponentPropsWithoutRef<"button">;

const Hamburger = forwardRef<HTMLButtonElement, THamburgerProps>(
  ({ ...props }, ref) => {
    return (
      <Box
        as="button"
        ref={ref}
        type="button"
        p="1"
        fontSize="2xl"
        color="gray.600"
        display={{ base: "block", lg: "none" }}
        {...props}
      >
        <HiOutlineMenu />
      </Box>
    );
  }
);

Hamburger.displayName = "Hamburger";

function App() {
  return <Hamburger onClick={() => console.log("hamburger clicked!")} />;
}

In your first example, you are not actually adding the onClick event. Just passing the reference to the component doesn't mean it automatically know what to do with it.

The second example does actually add the onClick to the button, like it should, which is why it works.

In your first example, you are using "onClick" as a parameter, not as the actual event handler.

import React, { Component } from "react";

class FormGrid extends Component {
  getClickHandler = item => event => {
    const { soundDisplayChange } = this.props;
    soundDisplayChange(item);
  };

  render() {
    const { array } = this.props;

    return (
      <div id="button-grid">
        {array.map(item => (
          <button
            key={item.letter.toString()}
            id={item.letter}
            onClick={this.getClickHandler(item)}
          >
            {item.letter}
          </button>
        ))}
      </div>
    );
  }
}

export default FormGrid;

I hope this helps. It's just a really verbose way of saying the same thing that u/ansella said, but I thought it might make the bigger picture more clear.

Parent Component:

interface OnClickIdInterface {
    (): void,
}

export interface parentPropsInterface {
    onClick?: OnGetIdInterface;
}
 
render() {
    return <ChildComponent onClick={(id) => this.onClick(id)}/>
 }

Child Component:

const HomePresentation: React.FunctionComponent<parentPropsInterface> = ({onClick}) => {
    return (
        <div onClick={()=>onClick()}>
           some content
        </div>
    )
}

The component in is receiving a clickHandler, and it doesn't care about what parameters might be passed into it. The component will fire a callback on being clicked, and will pass it a ReactSyntheticEvent object. In this case, the develop is omitting the () => ... portion because it isn't necessary. They don't care about what arguments might be passed in. The props.onClick function being passed into from is the function () => this.props.onClick(i). This function ignores any arguments you might try and pass to it, so the ReactSyntheticEvent object is just discarded. Each square receives a function with the value of i embedded in it, and when the square is clicked, it invokes that function. The value of i comes from the parameter of Board.renderSquare(i) { ... }, which is provided with each invocation: {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} in turn is receiving an onClick prop from onClick={i => this.handleClick(i)} Here they're omitting the parenthesis because they aren't necessary for an arrow function with a single parameter. They could also write onClick={this.handleClick} and not use an arrow function. Ultimately what is happening here is each component is passed a function as a prop. That component then wraps it in another function and passes that down in turn: (i) => this.handleClick(i) () => this.props.onClick(i) props.onClick We can rewrite this as: props.onClick = () => this.props.onClick(i) this.props.onClick = (i) => this.handleClick(i) So props.onClick is really () => ((i) => this.handleClick(i))(i) // () => IIFE

Is there a way to replace the 'any' keyword in the IProps_Square interface with an explicit function signature

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')   
); 

However if you need the parameter the proper type for it is React.MouseEvent<HTMLElement>, so:

interface IProps_Square {
  message: string,
  onClick: (e: React.MouseEvent<HTMLElement>) => void,
}

interface CloseButtonProps {
  className?: string;
  onClick?: (e:React.MouseEvent<any>) => void;
  /* You can add another props  here */
}


const CloseButton = ({ className, onClick }: CloseButtonProps) => {
  ...
}