How do I fire a click function with React and Typescript?

Question

I'm new to React and TypeScript.

I want to make a simple function that just fires a console.log(); I've gone through a few tutorials but don't really understand.

I've created an interface as such as per the tutorial:

interface ClickHandlerProps {
  onClick; (event: React.SyntheticEvent<Event>, buttonType: string) => void
}

And in the return function I have:

<Button
  onClick={(e) => props.onClick(e, "button1")}
>

But the tutorial kind of ends there. I don't really know how to just fire a console.log().

I know it's a bit vague, but could anyone help me out and point me in the right direction?

Full code:

import React from 'react';
import { Button, Grid } from '@material-ui/core';

interface ClickHandlerProps {
  onClick; (event: React.SyntheticEvent<Event>, buttonType: string) => void
}

const ActionButtons = ({ onClick }: EventHandlerProps) => {

  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={4}>
          <Button onClick={(e) => props.onClick(e, "button1")} >
            Button 1
          </Button>
        </Grid>
        <Grid item xs={4}>
          <Button onClick={(e) => props.onClick(e, "button2")} >
            Button 2
          </Button>
        </Grid>
      </Grid>
    </>
  );
};

export default ActionButtons;

On index.tsx

import ActionButtons from './ActionButtons';
export default ActionButtons;

Mario Vernari · Accepted Answer · 2020-04-27 02:39:29Z

1

You made a typo here: you must use the colon to separate the property name from its type.

interface ClickHandlerProps {
  onClick: (event: React.SyntheticEvent<Event>, buttonType: string) => void
}

answered Apr 27, 2020 at 2:39

Mario Vernari

7,4241 gold badge37 silver badges57 bronze badges

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

7 Comments

MeltingDog Over a year ago

Thanks. I still get a props is not defined message though. Would you know what that means?

Mario Vernari Over a year ago

because you are using props in the event handlers, whereas you actually do not need it. Change it to: onClick={(e) => onClick(e, "button1")}

MeltingDog Over a year ago

Thanks I did remove that but then it jsut doesn't recognise onClick: onClick is not a function

Mario Vernari Over a year ago

that depends on how your ActionButtons is called. You should edit the post and add that piece of code.

MeltingDog Over a year ago

Thanks - have added above

|

julianobrasil · Accepted Answer · 2020-04-27 03:02:23Z

Now you can use your ActionButtons component like this:

import React, {SyntheticEvent} from 'react';

const MyComponent = (props) => {
  const clickHandler = (evt: SyntheticEvent<Event>, btnType: string) => {
    console.log(`Button clicked: ${btnType}`
  };

  return <ActionButtons onClick={clickHandler}></ActionButtons>
}

export default MyComponent;

Notice you're passing clickHandler function to onClick input, so any click inside ActionButtons will call clickHandler.

BTW, there seem to be some errors on the example ActionButtons component:

const ActionButtons = ({ onClick }: EventHandlerProps) => {
  return (
    <>
      <Grid container spacing={3}>
        <Grid item xs={4}>
          <Button onClick={(e) => onClick(e, "button1")} >
            Button 1
          </Button>
        </Grid>
        <Grid item xs={4}>
          <Button onClick={(e) => onClick(e, "button2")} >
            Button 2
          </Button>
        </Grid>
      </Grid>
    </>
  );
};

export default ActionButtons;

Collectives™ on Stack Overflow

How do I fire a click function with React and Typescript?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related