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
– Alvaro, Commented Nov 19, 2019 at 11:57

Kary · Accepted Answer · 2019-11-19 12:35:23Z

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, 2019 at 12:35

answered Nov 19, 2019 at 11:54

Kary

2381 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kary Over a year ago

Thanks. Just edited the answer, if value is not valid element just render string

Collectives™ on Stack Overflow

Render prop as string or component with Typescript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related