add react props & typescript standard and examples #70
Conversation
cobiwave
changed the title
psimk
requested review from
ThaNarie,
Miguel-Bento-Github,
psimk,
gianko,
leroykorterink,
mmnathan,
skulptur and
ThijsTyZ
There was a problem hiding this comment.
I think another really useful thing to mention would by why we should not use React.FC or FunctionComponent to type our components. Together with that also shortly explain PropsWithChildren.
Listing https://react-typescript-cheatsheet.netlify.app/ might also be helpful, it contains (with explanations) a bunch of TS and React examples. It has helped me out a ton in the past.
|
@cobidev if you can resolve the conflicts, then we can finally merge this in :) |
Use `React.ReactElement` instead of `JSX.Element` Co-authored-by: Leroy Korterink <[email protected]>
psimk
requested review from
leroykorterink,
ThaNarie and
ThijsTyZ
and removed request for
Miguel-Bento-Github
| type or wrap your prop type in the `PropsWithChildren` type util. | ||
|
|
||
| ```ts | ||
| type MonkComponentProps = { |
There was a problem hiding this comment.
Shouldn't we be using the interface keyword instead of the type keyword?
| type MonkComponentProps = { | |
| interface MonkComponentProps { |
| // other properties | ||
| }; | ||
|
|
||
| function MonkComponent({ children }: PropsWithChildren<MonkComponentProps>): ReactElement { |
There was a problem hiding this comment.
I don't think we should add this example. The example above is a more concise way to set a type for the children prop. This also creates an anonymous type that can only be inferred using eg the React.ComponentProps<T> type helper.
There was a problem hiding this comment.
I don't really see a problem with this, and would actually say that that is an advantage rather than an issue.
- Each component should decide by itself if it accepts children or not.
- If I reuse a prop type that has
children?: ReactNodedefined, then I might accidentally permitchildrenwhere I don't want them.
type ChildProps = { children?: ReactNode };
function Child({ children }: ChildProps { /* do stuff */ }
type ParentProps = { /* stuff */ } & ChildProps
function Parent(props: ParentProps { /* do stuff */ }
<Parent>/* oops, I can pass children and TS is ok */</ Parent>
No description provided.