Pass react component as props

Question

Lets say I have   import Statement from    Statement   import SchoolDetails from    SchoolDetails   import AuthorizedStaff from    AuthorizedStaff    const MultiTab        gt       lt Tabs initialIndex  1  justify  start  className  tablisty  gt       lt Tab title  First Title  className  home  gt         lt Statement   gt       lt  Tab gt       lt Tab title  Second Title  className  check  gt         lt SchoolDetails   gt       lt  Tab gt       lt Tab title  Third Title  className  staff  gt         lt AuthorizedStaff   gt       lt  Tab gt     lt  Tabs gt       Inside the Tabs component  this props has the properties   Children 3  className  tablist  justify  start    Children 0   this props children  will look like     typeof  Symbol react element   owner ReactCompositeComponentWrapper  self null  shadowChildren Object  source null  store Object key null props Object ref null type  Tab props  context    proto   Object   Children 0  props looks like    Children  one element  className  home  justify  first title    Finally Children object looks like  this is what i want to pass      typeof Symbol react element   owner ReactCompositeComponentWrapper  self null  shadowChildren undefined  source null  store  key null props Object   proto   Object   type  function Statement     ref null   The question is this  if I rewrite MultiTab like this   lt Tabs initialIndex  1  justify  start  className  tablisty  gt     lt Tab title  First Title  className  home  pass  Statement    gt     lt Tab title  Second Title  className  check  pass  SchoolDetails    gt     lt Tab title  Third Title  className  staff  pass  AuthorizedStaff    gt   lt  Tabs gt     Inside the Tabs component  this props children looks the same as above   children 0  props looks like   classname  home    pass  function Statement     title   First title    I want the pass property to look like  Above just prints out the Statement function      typeof Symbol react element   owner ReactCompositeComponentWrapper  self null  shadowChildren undefined  source null  store  key null props Object   proto   Object   type  function Statement     ref null   This is a weird question  but long story I m using a library and this is what it comes down to

User · Answer

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 and not an object (this tripped me up initially).

The code is simply this:

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

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

User · Answer

Using this props children is the idiomatic way to pass instantiated components to a react component  const Label   props   gt   lt span gt  props children  lt  span gt  const Tab   props   gt   lt div gt  props children  lt  div gt  const Page        gt   lt Tab gt  lt Label gt Foo lt  Label gt  lt  Tab gt    When you pass a component as a parameter directly  you pass it uninstantiated and instantiate it by retrieving it from the props  This is an idiomatic way of passing down component classes which will then be instantiated by the components down the tree  e g  if a component uses custom styles on a tag  but it wants to let the consumer choose whether that tag is a div or span    const Label   props   gt   lt span gt  props children  lt  span gt  const Button   props   gt        const Inner   props inner     Note  variable name  must  start with a capital letter      return  lt button gt  lt Inner gt Foo lt  Inner gt  lt  button gt    const Page        gt   lt Button inner  Label   gt    If what you want to do is to pass a children-like parameter as a prop  you can do that   const Label   props   gt   lt span gt  props content  lt  span gt  const Tab   props   gt   lt div gt  props content  lt  div gt  const Page        gt   lt Tab content   lt Label content  Foo    gt     gt    After all  properties in React are just regular JavaScript object properties and can hold any value - be it a string  function or a complex object

[javascript] Pass react component as props

Examples related to javascript

Examples related to reactjs