TypeScript / React - Trying to Create My Own Button Issue - Function Signature Problem

Question

I'm trying to create a simple button in React / TypeScript.

I'm not sure where I am getting the syntax for this incorrect.

Editors don't seem to like the ' => void ' part of my signature.

My goal is to be able to pass down a "clear state" type handler from any parent component.

import React from 'react';
import ClearIcon from '@material-ui/icons/Clear';

// problem is on this line
export function ClearButton(props: {onClick: (React.MouseEvent<HTMLElement>) => void}) {
  return (<span
            onClick={(e) => { props.onClick(e) }}>
    <ClearIcon /></span>);
}

tomleb · Accepted Answer · 2022-10-07 14:36:29Z

1

I believe you forgot the name of the function's parameter.
Example:

onClick: (e: React.MouseEvent<HTMLElement>) => void

Also, the actual onClick on the span should probably be assigned like so:

onClick={(e) => props.onClick(e)}>

Alternatively, you could use a shorter syntax in this case, if you prefer.

onClick={props.onClick}>

So your code becomes:

export function ClearButton(props: {onClick: (e: React.MouseEvent<HTMLElement>) => void}) {
  return (
     <span onClick={(e) => props.onClick(e)}>
        <ClearIcon />
     </span>
  )
}

edited Oct 7, 2022 at 14:36

answered Oct 7, 2022 at 14:15

tomleb

2,5232 gold badges12 silver badges25 bronze badges

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

3 Comments

BuddyJoe Over a year ago

Thanks. Need more coffee stat!

BuddyJoe Over a year ago

Thanks... also going to fix the signature in the question... used wrong type. ChangeEvent instead of MouseEvent

tomleb Over a year ago

Ok, then I'll also update the answer to avoid confusing others

Collectives™ on Stack Overflow

TypeScript / React - Trying to Create My Own Button Issue - Function Signature Problem

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related