
ReactJS Anti Pattern ~Props missing HTML attributes~
When designing shared components, it is essential to ensure that the native behavior of HTML is not compromised. For example, when using the button element, you should adhere to HTML standard attributes and types, such as type , disabled , aria-* attributes, and the onClick event handler. Bad example Implementations that pass only custom values to onClick event handlers significantly reduce maintainability and extensibility. Deviating from standard HTML attributes and event types can cause problems during future extensions. // BAD: Button with missing HTML attributes or invalid type type Props = { label : string ; // Originally, React.MouseEventHandler<HTMLButtonElement> onClick ?: ( value : string ) => void ; value ?: string ; }; export const BadButton : React . FC < Props > = ({ label , onClick , className , value }) => { return ( < button // Missing HTML type/disabled/aria-* className = " inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-white " onClick = {() => onClick
Continue reading on Dev.to React
Opens in a new tab

