'Missing return type on a function which returns a React Fragment

I am currently trying to clean up some ESLint warnings on my project, and I am stuck on a missing return type on the following function. I have tried to set the return type to React.ReactFragment, however that gives me an error on all areas where the function is called.

export const RightsTooltip = () =>
  <>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet./p>
  </>

Usage of the function:

<Group>
  <b>Additional rights</b>
  <Hint tooltip={<RightsTooltip/>}/>
</Group>

Error when return type is set to React.ReactFragment:

'RightsTooltip' cannot be used as a JSX component.
  Its return type 'ReactFragment' is not a valid JSX element.
    Type '{}' is missing the following properties from type 'ReactElement<any, any>': type, props, key
node.jsreactjstypescript


Solution 1:[1]

A React functional component should always return a JSX.Element. That's the type you want if you are requiring that all functional components have an explicit return type

export const RightsTooltip = (): JSX.Element =>
  <>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Mauris laoreet.</p>
  </>

Playground

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alex Wayne

Related Questions