react inherit html input props 1

react inherit html input props

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes {
  title: string;
  showIcon: boolean;
}

const Button: React.FC = ({ title, showIcon, ...props }) => {
  return (
    
  );
};

Here is what the above code is Doing:
1. We’re creating a new interface called ButtonProps.
2. We’re extending the ButtonProps interface with the React.ButtonHTMLAttributes interface.
3. We’re adding a title and showIcon property to the ButtonProps interface.
4. We’re creating a new component called Button.
5. We’re using the ButtonProps interface as the type for the props argument.
6. We’re using the title and showIcon properties in the JSX.
7. We’re using the spread operator to pass the rest of the props to the button element.

The Button component is now strongly typed.

If we try to pass a property that doesn’t exist on the ButtonProps interface, TypeScript will give us an error.

For example, if we try to pass a className property to the Button component, TypeScript will give us an error.

Similar Posts