The error "Property 'children' does not exist on type 'y' occurs when we pass children to a component which does not have the children prop type defined.
The following code will recreate the same error as above:
Here, we are using a component called 'Bio' to display the 'name' and 'location' of a person. However, we are also passing a child component to the 'Bio' component by wrapping it inside the 'Bio' opening and closing tag.
In this case, the error occurs since we forgot to mention the prop type of children being passed to the 'Bio' component. We can fix this by passing the proper typing for the children prop of the component 'Bio'.
In case, you didn't intend to pass any children to the component, then you should use a self-closing tag like in the following code.
You need to use an opening and closing tag only when passing children to a component.
You can use other coding practices like destructuring the props to avoid accessing the 'props' object each and every time, or passing an 'any' type to the prop to disable type checking altogether. See the code below:
To have more strong type checking, it is common to use the 'React.FucntionalComponent' type when defining a component. This is to ensure that the return of the React component is also type checked.
This ensures that the return type is a React functional component.
Check my article on why to use TypeScript with React?
Subscribe to Sharooq
Join the growing community of friendly readers through my monthly newsletter.