React Tips: Extends Props HTML Element
Tags: react, javascript, typescript, beginners
Published: 2024-02-14 20:05:17

Hi there! How have you been? How are you doing? 
It's great to see you, again!

In this small article, I want to show you a tip of React with Typescript. If you are young or starting with React, propabably you already write some code like this:

```tsx
interface MyCustomButtonProps {
  label: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  isDark: boolean;
}

export const MyCustomButton = ({ label, onClick, isDark }: MyCustomButtonProps) => {
  return (
    <button className={isDark ? 'bg-black' : 'bg-white'} onClick={onClick}>
      {label}
    </button>
  );
};
```

I'm creating a custom button to apply some rule logics or reuse this simple component.
But, if you see I'm using the `label` and `onClick` events, which is default props of a button element.


![Michael Scott Gif Sad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlrm5phmfqjjyjilf0f6.gif)


How we can make this component more cleaner? Simple!
Just use the extends on your Props definition!

```tsx
interface MyCustomButtonProps extends HTMLProps<HTMLButtonElement> {
  isDark: boolean;
}
```

Now we can use the `same` props wihout redeclare the props of element itself:

```tsx
interface MyCustomButtonProps extends HTMLProps<HTMLButtonElement> {
  isDark: boolean;
}

export const MyCustomButton = ({ label, onClick, isDark }: MyCustomButtonProps) => {
  return (
    <button className={isDark ? 'bg-black' : 'bg-white'} onClick={onClick}>
      {label}
    </button>
  );
};
```

Simple, insn't it?

Let's see another example! Imagine that you have a custom input element:

```tsx
interface MyCustomButtonProps {
  isDark: boolean;
  placeholder?: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  type: string;
  id?: string;
  name?: string;
}

export const MyCustomInput = ({ placeholder, onChange, isDark, name, id, type }: MyCustomButtonProps) => {
  return (
    <input
      className={isDark ? 'bg-black' : 'bg-white'}
      type={type}
      name={name}
      id={id}
      placeholder={placeholder}
      onChange={(e) => onChange}
    />
  );
};
```

It's a big one! With a lot of props!
But we can simplify using, again, the extends HTMLProps passing the generic HTMLInputProps...

```tsx
interface MyCustomInputProps extends HTMLProps<HTMLInputElement> {
  isDark: boolean;
}
```

And let's see the entire component:

```tsx
interface MyCustomInputProps extends HTMLProps<HTMLInputElement> {
  isDark: boolean;
}

export const MyCustomInput = ({ placeholder, onChange, isDark, name, id, type }: MyCustomInputProps) => {
  return (
    <input
      className={isDark ? 'bg-black' : 'bg-white'}
      type={type}
      name={name}
      id={id}
      placeholder={placeholder}
      onChange={(e) => onChange}
    />
  );
};
```

More cleaner? Yep!
We are just using the props of element default itself. And adding just the props that is for our custom element.

Helpful? How I said, this is a small article, but with the principles of SOLID and tip of Typescript inference on React.

Thank you so much!
Stay well, always!


Contacts:
 - Linkedin: https://www.linkedin.com/in/kevin-uehara/
 - Instagram: https://www.instagram.com/uehara_kevin/
 - Twitter: https://twitter.com/ueharaDev
 - Github: https://github.com/kevinuehara
 - dev.to: https://dev.to/kevin-uehara
 - Youtube: https://www.youtube.com/@ueharakevin/