patternjavascriptreactCritical
React 18 TypeScript children FC
Viewed 0 times
childrentypescriptreact
Problem
I upgraded to React 18 and things compiled fine. Today it seems every single component that uses children is throwing an error.
Before children props were automatically included in the
Is this part of the React 18 update, or is something screwed up in my env?
package.json
tsconfig.json
Property 'children' does not exist on type 'IPageProps'.Before children props were automatically included in the
FC interface. Now it seems I have to manually add children: ReactNode. What is the correct typescript type for react children?Is this part of the React 18 update, or is something screwed up in my env?
package.json
"react": "^18.0.0",
"react-dom": "^18.0.0",
"next": "12.1.4",
"@types/react": "18.0.0",
"@types/react-dom": "18.0.0",tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"alwaysStrict": true,
"sourceMap": true,
"incremental": true
},
"include": ["src"],
"exclude": ["node_modules"]
}Solution
Although this answer is correct, I want to note that you absolutely don't have to use this
Instead, I find it easier to define them manually.
Before
After
That is all that's needed.
Or you can stop using
In React,
PropsWithChildren helper. (It is primarily useful for the codemod, not manual usage.)Instead, I find it easier to define them manually.
Before
import * as React from 'react';
type Props = {};
const Component: React.FC = ({children}) => {...}After
import * as React from 'react';
type Props = {
children?: React.ReactNode
};
const Component: React.FC = ({children}) => {...}That is all that's needed.
Or you can stop using
React.FC altogether.import * as React from 'react';
type Props = {
children?: React.ReactNode
};
function Component({children}: Props): React.ReactNode {
...
}In React,
children is a regular prop and is not something special. So you need to define it just like you define all the other props. The previous typings that hid it were wrong.Code Snippets
import * as React from 'react';
type Props = {};
const Component: React.FC<Props> = ({children}) => {...}import * as React from 'react';
type Props = {
children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}import * as React from 'react';
type Props = {
children?: React.ReactNode
};
function Component({children}: Props): React.ReactNode {
...
}Context
Stack Overflow Q#71788254, score: 248
Revisions (0)
No revisions yet.