I have a React function component that checks if children is an array. If it is not an array then it returns it. Otherwise it maps over the children and returns some JSX.
import React from 'react'
interface Props {
children: React.ReactNode
}
const LineBreak: React.FC<Props> = ({ children }): any => {
if (!Array.isArray(children)) return children
return (
<>
{children.map((child, i, arr) => {
if (i + 1 === arr.length) return child
return <>{child}<br /></>
})}
</>
)
}
export default LineBreak
What I would like to do is replace the any
on line 7. I logically think that changing it to React.ReactNode
would suffice, but that throws the type error:
Type '({ children }: PropsWithChildren<Props>) => ReactNode' is not assignable to type 'FC<Props>'. Type 'ReactNode' is not assignable to type 'ReactElement<any, any>'. Type 'string' is not assignable to type 'ReactElement<any, any>'.ts(2322)
I could really use some pointers on how to properly read these error messages.
I also tried to bypass this error message by changing the return type to string|React.ReactNode
and expected the same error because from my limited typescript knowledge React.ReactNode includes the type string.
JSX.Element | string | number | boolean | {}
to supress all of the errors from line 8 and it leads to the same error as the OP. It looks like I can resolve this by removing the React.FC type. Let me post an answer to myself.<>{children}</>
so your always returning a single JSX.ElementReact.FC
to()=> JSX.Element
will also work...