Render prop as string or component with Typescript

Question

I have a function that conditionally renders/returns a string or a dynamic component depending on what type the prop is:

const renderValue = (value: string | React.ReactNode) => {
  if (React.isValidElement(value)) {
    const Component = value
    return <Component />
  }
  return value
}

However, with the above code I get the following message from Typescript:

JSX element type 'Component' does not have any construct or call signatures.ts(2604)

I have read other answers on this topic on SO, but still haven't concluded an answer.

What you have looks like a functional component, would it be alright to use your function as a functional component? `const RenderValue`? — Alvaro, Nov 19 '19 at 11:57

Kary · Answer 1 · 2019-11-19T12:35:23.123

1

<Component /> is JSX notation and it's basically telling React to render this component. That's only possible in React Component which has to return JSX code. To solve the problem you could just check if argument is valid element and then render it conditionally in desired React Component

import React from 'react'

interface Props {
   value: string | React.ReactNode
}

const SomeComponent:React.FC<Props> = ({value}) => {
  return (
    <div>
      <span>Hello World</span>
      {React.isValidElement(value) ? <Component/> : value}
    </div>
  )
}

edited Nov 19 '19 at 12:35

answered Nov 19 '19 at 11:54

Kary

229
1
8

Thanks. Just edited the answer, if value is not valid element just render string – Kary Nov 19 '19 at 12:03

Render prop as string or component with Typescript

1 Answers1