We usually use React.FC<Props> as return type of the react functional component

For the following component

const MyComponent = ({myArray}) => {
    return myArray.map(
        (item, index) => <span key={index} className='foo'>{item}</span>
    );
}

if we wrap the returned value with Fragment we can use React.FC<Props> but without Fragment how can I prevent errors like Initializer type ({myArray}: {myArray: any}) => any is not assignable to variable type React.FC<Props>

CodePudding user response：

There's no pretty solution for this yet. It's an open issue in Typescript

There are two workarounds:

1. Wrap the array with fragment:

   <>
     {myArray.map(
       (item, index) => <span key={index} className='foo'>{item}</span>
     )}
   </>
   

2. cast the JSX Elements array to any type:

   myArray.map(
     (item, index) => <span key={index} className='foo'>{item}</span>
   ) as any
   

Reference from DefinitelyTyped: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356