TypeScript: How to define the type when pass component in props in React?

Question

Here's the code sample and the JS version is working correctly.

The issue I encountered happening in TS :

import React from 'react'

class Parent extends React.Component {
    render() {
      return (
        <Child Cpnt={<Header title='Header' />} />
        /* TS error on Cpnt */
      )
    }
  }

interface ChildProps {
    Cpnt: React.ComponentClass
}

class Child extends React.Component <ChildProps> {
    render () {
        const { Cpnt } = this.props
        return (
            <div>
                {{Cpnt}}
            </div>
        )
    }
}

interface HeaderProps {
    title: string
}

class Header extends React.Component <HeaderProps> {
    render () {
        const { title } = this.props
        return (
            <p>{title}</p>
        )
    }
}

I got an error on <Child Cpnt

[ts]
Type 'Element' is not assignable to type 'ComponentClass<{}, any>'.
  Type 'Element' provides no match for the signature 'new (props: {}, context?: any): Component<{}, any, any>'. [2322]

What type should I defind here?

try React.ReactElement

ManavM
– ManavM

2019-02-20 09:30:41 +00:00
Commented Feb 20, 2019 at 9:30 — ManavM
– ManavM, Commented Feb 20, 2019 at 9:30

Madara's Ghost · Accepted Answer · 2019-02-20 09:33:28Z

6

A React "renderable" is not React.ComponentClass but React.ReactNode.

Ask for React.ReactNode in your Cpnt prop.

answered Feb 20, 2019 at 9:33

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

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

1 Comment

Anna Over a year ago

React.ReactNode worked, but got new TS error: JSX element type 'Tag' does not have any construct or call signatures.

ManavM · Accepted Answer · 2019-02-20 09:33:11Z

0

You are passing <Header title='header' /> which is a React Element not Header which is a Component Class.

answered Feb 20, 2019 at 9:33

ManavM

3,1082 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

TypeScript: How to define the type when pass component in props in React?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related