The implementation of a SafeButton in React
The implementation of a SafeButton in React I have recently come across a problem. In a React web app, there are some buttons. There is an onclick handler for them, and they should get disabled onClick. Here is a simplified version: Button.tsx import * as React from "react"; type ButtonType = "button" | "submit" | "reset"; export interface ButtonProps { buttonType?: ButtonType; className?: string; disabled?: boolean; onClick?: React.MouseEventHandler<HTMLButtonElement>; children?: React.ReactNode; } export const Button: React.FC<ButtonProps> = ({ buttonType = "button", className, disabled = false, onClick, children }) => { return ( <button type={buttonType} className={className} disabled={disabled} onClick={onClick} > {children} </button> ); } Footer.tsx ...