DEV Community

Discussion on: Converting a React component to TypeScript

Collapse
constantiner profile image
Konstantin Kovalev

I'd suggest not to use FC< IAddWordProps > (or FunctionComponent<IAddWordProps>) here because of this type supposes component also accepts children (in this case not). Use VoidFunctionComponent<IAddWordProps> (or VFC<IAddWordProps>) instead.

Collapse
lukeshiru profile image
LUKESHIRU

I have a kinda personal rule to only use JSX with components that can take children, if they don't, then they are should be just functions instead, because I like my components to be as flexible and predictable as you were using the underlying native elements directly. I know there are a few native elements such as input that don't take children, but those are just a few exceptions.

Don't get me wrong, you're correct, VFC is a better type if you don't use children, but I personally prefer to always use children if I'm using JSX.

Thread Thread
constantiner profile image
Konstantin Kovalev

But for this particular component even if you pass some children, they will attach nowhere. So passing them is useless. Why not restrict them then? Or I missed the point?

Thread Thread
lukeshiru profile image
LUKESHIRU

For this particular component, children could go just next to the Add icon, like: <Add />{children}, or make it optional, like: {children ?? <Add />}, but yup, as it's being used right now, VFC is a better option (I mainly explained the reason why I personally default to FC).