Pass react component as props

Question

Lets say I have:

import Statement from \'./Statement\';
import SchoolDetails from \'./SchoolDetails\';
import AuthorizedStaff from \'./AuthorizedStaff\';

co         


        

Answer 1

As noted in the accepted answer - you can use the special { props.children } property. However - you can just pass a component as a prop as the title requests. I think this is cleaner sometimes as you might want to pass several components and have them render in different places. Here's the react docs with an example of how to do it:

https://reactjs.org/docs/composition-vs-inheritance.html

Make sure you are actually passing a component or not an object (this tripped me up initially).

The code is simply this:

const Parent = () => { 
  return (
    }  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {componentToPassDown}  
    
  )
}