CODEWITHSUNDEEP
javascriptreactjstypescript
Milk
Milk

Reputation: 11

How to pass component to props using React TypeScript?

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

Upvotes: 0

Views: 379

Answers (1)

Martin
Martin

Reputation: 2283

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

Upvotes: 1

Related Questions