How to render string OR Component?

Question

The props to a Row component in my table is given below:

interface props {
    data: Array<string|number> | Array<React.Component>
}

I tried using data.map() but it gave me errors since data can also contains React.Component How do I render a table row with contents as items of the given array ?

Are they react components or react elements? That is, is the array `data={[Foo, Bar]}` or `data={[, ]}`? — cbr, Sep 01 '20 at 17:00
Can you share your full code where you have used the map function. — Anup, Sep 01 '20 at 17:00

cbr · Accepted Answer · 2020-09-01T17:20:29.933

As you mentioned in the comment, you're not actually working with components, but with elements. In this case, you'll want to use React.ReactElement instead of React.Component. An element is an instance of a component.

interface props {
    data: Array<string | number> | Array<React.ReactElement>
}

Your use case sounds like you may be just looking for the type for "anything that I can render". In this case, use React.ReactNode:

interface props {
    data: Array<React.ReactNode>
}

If you only want string | number | React.ReactElement but not false, true, null, etc., use React.ReactChild instead of React.ReactNode, as it covers string | number | ReactElement

interface props {
    data: Array<React.ReactChild>
}

For more details about their differences, see When to use JSX.Element vs ReactNode vs ReactElement?

How to render string OR Component?

1 Answers1