CODEWITHSUNDEEP
javascriptreactjs
Udeshya D.
Udeshya D.

Reputation: 143

How to render string OR Component?

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 ?

Upvotes: 0

Views: 398

Answers (1)

cbr
cbr

Reputation: 13632

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?

Upvotes: 2

Related Questions