Pass react component as props

Question

Lets say I have:

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

const MultiTab = () => (
  <Tabs initialIndex={1} justify="start" className="tablisty">
    <Tab title="First Title" className="home">
      <Statement />
    </Tab>
    <Tab title="Second Title" className="check">
      <SchoolDetails />
    </Tab>
    <Tab title="Third Title" className="staff">
      <AuthorizedStaff />
    </Tab>
  </Tabs>
);

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"
title="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

<Tabs initialIndex={1} justify="start" className="tablisty">
  <Tab title="First Title" className="home" pass={Statement} />
  <Tab title="Second Title" className="check" pass={SchoolDetails} />
  <Tab title="Third Title" className="staff" pass={AuthorizedStaff} />
</Tabs>;

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.

why do you want to pass component as props ? when you can import — Aatif Bandey, Sep 23 '16 at 04:51
@AatifBandey Because he's passing different components? How would you solve this using imports exactly? Passing strings and doing equality checks? That makes no sense. — ivarni, Sep 23 '16 at 07:34
Does this answer your question? [How to pass in a react component into another react component to transclude the first component's content?](https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the) — Michael Freidgeim, May 01 '20 at 13:47

Stefan Dragnev · Accepted Answer · 2018-02-22T14:33:29.410

Using this.props.children is the idiomatic way to pass instantiated components to a react component

const Label = props => <span>{props.children}</span>
const Tab = props => <div>{props.children}</div>
const Page = () => <Tab><Label>Foo</Label></Tab>

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 => <span>{props.children}</span>
const Button = props => {
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button>
}
const Page = () => <Button inner={Label}/>

If what you want to do is to pass a children-like parameter as a prop, you can do that:

const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />

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.

I know you came with a lot of good arrow function examples. But would you mind showing how the code would look like if it was separated into different files? I'm a bit confused about how to use the `class` and `export` — Norfeldt, Apr 18 '17 at 18:43
Just use `export const Foo = ...` and then elsewhere `import {Foo} from "./foo"` — Stefan Dragnev, Apr 25 '17 at 07:09
Hint: make sure that `Inner` is not `inner`. Otherwise doesn't work — igo, Jul 27 '17 at 08:54
Basically to pass a component like `` just turn it into an arrow function: `() => ` — totymedli, Dec 10 '20 at 08:44

Wide Awake · Answer 2 · 2021-01-04T16:21:15.093

108

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}  
    </>
  )
}

edited Jan 04 '21 at 16:21

answered Aug 05 '20 at 09:01

Wide Awake

1,339
1
11
18

3

if child has a prop.how do I access that in the parent. – NicoleZ Sep 14 '20 at 18:20
4

@NicoleZ - the basic idea is to turn the question around. Ie, create the variable in the parent and pass it down to the child as a prop. If you want the child to change the variable then you need to create a function to do this in the parent and also pass that down as another prop. – Wide Awake Sep 14 '20 at 19:00
6

How can i give props to `componentToPassDown` in the chidl method? – Hadi Pawar Apr 15 '21 at 12:18
1

@HadiPawar just pass the props down: `} />` – duhaime Apr 29 '21 at 12:59

score 11 · Answer 3 · answered Apr 03 '22 at 03:09

By using render prop you can pass a function as a component and also share props from parent itself:

<Parent
  childComponent={(data) => <Child data={data} />}
/>

const Parent = (props) => {
  const [state, setState] = useState("Parent to child")

  return <div>{props.childComponent(state)}</div>
}

score 6 · Answer 4 · answered Oct 05 '21 at 17:17

I had to render components conditionally, so the following helped me:

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

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {conditionToCheck ? componentToPassDown : <div>Some other code</div>}
    </>
  )
}

score 2 · Answer 5 · edited Jun 24 '21 at 10:09

2

In my case, I stacked some components (type_of_FunctionComponent) into an object like :

[
 {...,one : ComponentOne},
 {...,two : ComponentTwo}
]

then I passed it into an Animated Slider, and in the the slide Component, I did:

const PassedComponent:FunctionComponent<any> = Passed;

then use it:

<PassedComponent {...custom_props} />

edited Jun 24 '21 at 10:09

B001ᛦ

2,036
6
23
31

answered Jun 23 '21 at 23:34

kimo_ouz

323
4
7

score 1 · Answer 6 · answered Nov 08 '21 at 10:30

1

How about using "React.createElement(component, props)" from React package

const showModalScrollable = (component, props) => {
 Navigation.showModal({
   component: {
     name: COMPONENT_NAMES.modalScrollable,
     passProps: {
        renderContent: (componentId) => {
          const allProps = { componentId, ...props };

          return React.createElement(component, allProps);
    },
  },
},

}); };

answered Nov 08 '21 at 10:30

Luis Pereira

96
3

Using and iteration of React.createElement worked for me – Cat Perry Jun 17 '22 at 15:42

score 0 · Answer 7 · answered May 10 '23 at 07:13

Most common way to pass a component as a prop is this:

 function ParentComponent(props) {
  return (
    <div>
      {props.childComponent}
    </div>
  );
}

function ChildComponent() {
  return (
    <div>
      This is the child component.
    </div>
  );
}

function App() {
  return (
    <ParentComponent childComponent={<ChildComponent />} />
  );
}

If child component is for example a button and it has some state with it, it will pass automatically and work.

Pass react component as props

7 Answers7

Linked

Related