How to pass component to props using React TypeScript?

Question

I am learning React with TypeScript. And I ran into such a problem.
I have a parent component:

import React from 'react';
import TestPropsComponent from './TestPropsComponent';
    
 const SomeTable: React.FC= () => {
   return (
     <table>
      <caption>Some Table</caption>
       <tr>
         <th>SomeData1</th>
          <th>SomeData2</th>
          <th>SomeData3</th>
       </tr>
       <tr><td>34,5</td><td>3,5</td><td>36</td></tr>
       <tr><td>35,5</td><td>4</td><td>36⅔</td></tr>
       <tr><td>36</td><td>4,5</td><td>37⅓</td></tr>
     </table>
   );
  }

const App: React.FC = () => {

return (
   <TestPropsComponent someTable={SomeTable}/>
 )
}

export default App;

how can I pass the SomeTable component to TestPropsComponent?
i created an interface

export interface ITestPropsComponent {
    someTable: React.ComponentType
}

the child component looks like this

import React from 'react';
import { ITestPropsComponent } from './interface/ITestPropsComponent';


const TestPropsComponent: React.FC<ITestPropsComponent> = ({someTable}) => {
 return (
     {someTable}
 )

}

export default TestPropsComponent

but nothing is rendered and an error is displayed

The type "({someTable}: PropsWithChildren <ITestPropsComponent>) => {someTable: ComponentType <{}>;}" cannot be assigned to the type "FC <ITestPropsComponent>".
  The type "{someTable: ComponentType <{}>;}" is missing the following properties from the type "ReactElement <any, any>": type, props, key

Please tell me the best practice for such a case

Martin · Accepted Answer · 2020-11-25 06:57:43Z

1

The problem in your code, that someTable in your TestPropsComponent is a Component not a simple node, so you have to invoke it:

const TestPropsComponent: FC<ITestPropsComponent> = ({ someTable: SomeTable }) => {
    return <SomeTable />;
}

Full example

answered Nov 25, 2020 at 6:57

Martin

2,3032 gold badges16 silver badges23 bronze badges

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

2 Comments

Milk Over a year ago

Thank you very much! Everything works. And if, for example, the passed component contains props?

Martin Over a year ago

ComponentType is generic, you can specify the props of the element in the interface someTable: ComponentType<TableProps>.

Collectives™ on Stack Overflow

How to pass component to props using React TypeScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related