Breaking News: Grepper is joining You.com. Read the official announcement!

click handler in typescript

Ugliest Unicorn answered on September 19, 2022 Popularity 10/10 Helpfulness 5/10

answer click handler in typescript

click handler in typescript

Comment

// App.tsx
// Handling button click in React using typescript

import React, { useState } from "react";
import "./App.css";

const App = (): JSX.Element => {
  const [clickedButton, setClickedButton] = useState('');

  const buttonHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();

    const button: HTMLButtonElement = event.currentTarget;
    setClickedButton(button.name);
  };

  return (
    <div className="container">
      <h3>Hello world</h3>
      <form>
        <button onClick={buttonHandler} className="button" name="button 1">
          Button 1
        </button>

        <button onClick={buttonHandler} className="button" name="button 2">
          Button 2
        </button>

        <button onClick={buttonHandler} className="button" name="button 3">
          Button 3
        </button>

        <button onClick={buttonHandler} className="button" name="button 4">
          Button 4
        </button>
      </form>
      <h1>
        {clickedButton !== ""
          ? `You have clicked "${clickedButton}"` 
          : "No button clicked yet"}
      </h1>
    </div>
  );
};

export default App;

Popularity 10/10 Helpfulness 5/10 Language typescript

Source: www.kindacode.com

Tags: click handler typescript

Link to this answer
Share Copy Link

Contributed on Sep 19 2022

Ugliest Unicorn

0 Answers Avg Quality 2/10

click handler in typescript

Contents

More Related Answers

click handler in typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.