Transition project to typescript #6
Conversation
| import classNames from 'classnames'; | ||
|
|
||
| const Button = ({ | ||
| interface ButtonProps { | ||
| children: string; |
There was a problem hiding this comment.
FCalready has types forchildren, so no need to put it here.childrenareReactNodeAFAIK, notstring. (ReactNodeincludesstring)
There was a problem hiding this comment.
-
Good to know, thanks. I read afterwards that it's a good idea to make it explicit, when a component is accepting children (as some components don't). Thus it might be good to leave it. Do you agree?
-
In this Button case I actually only want text as children. Is string ok then because it is more specific?
src/components/Button/Button.tsx
Outdated
| onClick, | ||
| }) => { |
There was a problem hiding this comment.
a lot of times it's a good practice in cases like this when you're extending an HTML button, to extend its props like
interface ButtonProps extends HTMLButtonElement
and then use the ...props notation to pass some native button props to the <button> inside
There was a problem hiding this comment.
Awesome! Thanks so much Esen. This actually answered a question I had lurking in my mind for a while now about how to easily extend all HTML attributes to a component without writing tons of code.
I've chosen ComponentProps<"button"> over HTMLAttributes<HTMLButtonElement>after reading this article: https://dev.indooroutdoor.io/how-to-extend-any-html-element-with-react-and-typescript
Would you agree it's an even better choice?
| interface ContentCenterProps { | ||
| children: ReactNode; | ||
| } |
There was a problem hiding this comment.
I have to admit FC with Typescript confuses me :).
First, I stumbled upon sooo many ressources discouraging the use of FC, e.g. https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/.
So FC automatically adds children type to all React components? That's probably bas I want to be explicit about it, correct? What's your take on it?
Then, based on you comment I tried FC without children, but get Typescript errors. Here is what I tried:
const Content: FC = ({ children }) => { return <div className='Content'>{children}</div>; };
Error message: 'Property children does not exist on type {}'. What am I doing wrong?
No description provided.