When to use JSX.Element, ReactNode and ReactElement in TypeScript with React?
Hi! I started learning TypeScript with React and I'm constantly confused about the types for describing what can be returned from a component or passed as children. I often come across three types on the internet: `JSX.Element`, `ReactNode` and `ReactElement`. But when to use which — is a mystery to me.
For example, I'm writing a wrapper component:
```typescript
interface WrapperProps {
children: ??? // What to put here?
}
```
Or when I want to explicitly specify the return type of a component function:
```typescript
const MyComponent = (): ??? => {
return
Hello
;
};
```
I tried using `ReactNode`, but then TypeScript complains when I try to pass something like an array of components. Then I tried `JSX.Element` — it seems to work, but I'm not sure if it's correct. And p No answers yet.
Log in to leave an answer