Resolving the Type JSX.Element is not assignable to type React.ReactNode Error in React

Learn how to fix the `Type JSX.Element is not assignable to type React.ReactNode` error when using a custom conditional render component in React. This guide provides an in-depth explanation and practical solutions to enhance your React development.
---
This video is based on the question https://stackoverflow.com/q/74872687/ asked by the user 'RexiaN' ( https://stackoverflow.com/u/11861390/ ) and on the answer https://stackoverflow.com/a/74872717/ provided by the user 'Sachila Ranawaka' ( https://stackoverflow.com/u/6428638/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Type JSX.Element is not assignable to type React.ReactNode when using customed conditional render component

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving the Type JSX.Element is not assignable to type React.ReactNode Error in React

Introduction

As a React developer, you may occasionally encounter type issues, especially when working with TypeScript. One common error that many face is when using a custom conditional render component and seeing the perplexing message: "Type JSX.Element is not assignable to type React.ReactNode." If you've faced this problem, you are not alone! Let's dive into the specifics of the issue and how to resolve it effectively.

The Problem

In a React application, you may have a template component that is designed for conditional rendering. It could look something like this:

[[See Video to Reveal this Text or Code Snippet]]

When utilizing this Show component, you might run into the error while trying to use it as follows:

[[See Video to Reveal this Text or Code Snippet]]

The IDE flags the following error: "Type JSX.Element is not assignable to type React.ReactNode." This can be confusing since both React.ReactElement and JSX.Element are constructed via React.createElement. So why doesn’t React.ReactNode seem to accept JSX.Element? Let's investigate.

Understanding the Types

To understand the underlying issue, we need to clarify what each type encompasses:

ReactNode: This type can include anything that can be rendered: React elements, fragments, strings, numbers, arrays of ReactNode, and more.

JSX.Element: This specifically refers to the result of JSX expressions and is a subtype of ReactNode.

The Issue with Your Fallback

In the example provided:

The fallback prop is currently typed as React.ReactNode.

However, the fallback you're providing falls into the category of HTML templates that require a more specific definition.

As indicated, ReactNode is more flexible but does not fully accommodate the specific requirements of your component's structure when the fallback is explicitly a JSX element.

The Solution

To resolve the error, you will need to modify the type of the fallback property in the Show component from React.ReactNode to JSX.Element. Here’s how you can do it:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes to Implement:

Update the Prop Type: By changing the type of the fallback prop to JSX.Element, we specify that this prop should be an actual JSX element.

Retain the children Prop Type: You can keep the type for children as React.ReactNode, which allows for greater flexibility.

Conclusion

By understanding the types in React and updating your component accordingly, you can overcome the error: "Type JSX.Element is not assignable to type React.ReactNode." This adjustment clarifies your intentions to TypeScript and allows your conditional rendering components to function correctly.

Now that you've tackled this problem, you're one step closer to mastering React with TypeScript. Keep experimenting and coding, and you'll continue to grow as a developer!