Is it possible to pass a React Component as argument in between functions of a Container Component

Question

Passing Child Components as arguments to functions of Parent Component and trying to render does not work

//React Container Component //Import Both Views and Render based on preference import PosterView from "./PosterView" import ListView from "./ListViewCard"  ...  renderCardsBasedOnType(cardType){   if(cardType === "poster"){      return this.renderCards(PosterView)   }else{      return this.renderCards(ListViewCard)   } } renderCards(component){   let cards =  this.props.list.map(function(cardData){      return <component data={cardData}/>    })   return cards } render(){   let cards = this.renderCardsBasedOnType("poster")   return <div>{cards}</div> } ...... 

Answer 1

Try Component instead of component. React requires an upperCase for jsx tag:

renderCards(Component){   let cards =  this.props.list.map(function(cardData){      return <Component data={cardData}/>    })   return cards } 

Answer 2

Thanks to Damien's answer, here's the same answer using TypeScript with React.

Instead of this, i.e. a simple component without a wrapper ...

export const SiteMapContent: FunctionComponent = () => {   return (     <React.Fragment>       <h1>Site Map</h1>       <p>This will display the site map.</p>     </React.Fragment>   ); } 

... you can pass a component into a wrapper to be rendered there, like this ...

const renderContent: FunctionComponent<FunctionComponent> = (Foo: FunctionComponent) => {   return (     <div className="foo">       <Foo />     </div>   ) }  export const SiteMap: FunctionComponent = () => {   return renderContentOne(SiteMapContent); }  const SiteMapContent: FunctionComponent = () => {   return (     <React.Fragment>       <h1>Site Map</h1>       <p>This will display the site map.</p>     </React.Fragment>   ); } 

Again the name of the parameter must be upper-case e.g. Foo not foo.

A different way of course, instead of passing a component as asked in the OP is to pass an element instead of a component (in which case the parameter name needn't be upper-case):

const renderContent: FunctionComponent<ReactElement> = (foo: ReactElement) => {   return (     <div className="foo">       {foo}     </div>   ) }  export const SiteMap: FunctionComponent = () => {   const foo: ReactElement = <SiteMapContent />;   return renderContentOne(foo); }  const SiteMapContent: FunctionComponent = () => {   return (     <React.Fragment>       <h1>Site Map</h1>       <p>This will display the site map.</p>     </React.Fragment>   ); }