Passing components into another in react

Question

I have an app with a number of components. One of the components I need be to able to pass different variations of another two components into, based on a layout. I believe it can be passed in like a data attribute, but I'm unsure of the exact syntax to push the other components in.

Given two components <List /> and <Box /> which are currently in another component being imported into my main App.js file as such:

export const CallOut = () => {
  return(
      <div style={styles.sectionInner}>
        <List />
        <BoxRight/>
      </div>
  )
};

where <CallOut /> is being imported into App.js, I'd like to pass those two components into the <CallOut /> component.

What is the correct syntax to pass those two in and have them placed in the same spot they're currently in within the CallOut component?

I believe it should be something similar to

<CallOut param={List} param={BoxRight} />

but I know this isn't right.

Possible duplicate of [Pass react component as props](https://stackoverflow.com/questions/39652686/pass-react-component-as-props) — Hemadri Dasari, Aug 23 '18 at 19:05

score 0 · Answer 1 · 2018-08-23T19:44:42.097

0

You can use capital names for props, and use these to instantiate react components like this:

export const CallOut = ({List, Box}) => (
  <div style={styles.sectionInner}>
    <List/>
    <Box/>
  </div>
);

List and Box are the properties of this component. You can instantiate it like this:

<CallOut List={SomeComponent} Box={SomeOtherComponent}/>

edited Aug 23 '18 at 19:44

answered Aug 23 '18 at 18:59

This is a nice way of doing it. However, how can I pass them simply on the `` component so that it's something like `` – Matt Aug 23 '18 at 19:04
You can assign these props to variables with names starting with a capital letter and then just use them like any other components. – Aug 23 '18 at 19:07
I'm not quite sure how you mean? – Matt Aug 23 '18 at 19:08
I think there may be some confusion on what I'm working towards. I'll have multiple instances of `` within the layout, and need to pass different variations of the `` and `` components into the `` component which lies within the App.js main file. So there would be `` and variations like that. – Matt Aug 23 '18 at 19:21
With this code, you can pass `List` and `BoxRight` as properties. – Aug 23 '18 at 19:25
However, that hardcodes the variations to the `CallOut` component. The CallOut needs to be able to have different variations of the list and box components passed into ``, and the CallOut component function would just be a wrapper of sorts. – Matt Aug 23 '18 at 19:27
I think I was getting the idea of passing values from one component to another mixed up with passing a component variant into another component, though I thought you could pass a component as a prop such as ``. Is there not a way to pass components as a prop? Thanks for your continued help! – Matt Aug 24 '18 at 12:56

score 0 · Answer 2 · answered Aug 23 '18 at 20:31

0

I don't know if we're on the same page but maybe you're looking for children property ?

So your component will look like that:

export const CallOut = ({children}) => (
  <div style={styles.sectionInner}>
    {children}
  </div>
);

And usage:

  <CallOut >
    <List/>
    <Box/>
  </CallOut>

You can pass any component as CallOut child or even do some filtering using children API

It's common usage when components don’t know their children ahead of time and it's used just for some kind of boxing/wrapping.

answered Aug 23 '18 at 20:31

Maciej Wojsław

403
2
10

This is the same implementation that DoMiNeLa10 initially posted before changing to the current version. I'm looking for a way to pass `List` and `Box` as values into `CallOut` as something like `` There will be multiple `CallOut` components with variations of the list and box components passed into them. Hopefully this helps clear up the confusion. Any thoughts? – Matt Aug 23 '18 at 20:40
Ok, i got it. So maybe pass functions which will be called to create list and box components inside your `CallOut` component. It will look like that: ` } box={() => }/>`. Is it what your are looking for ? – Maciej Wojsław Aug 23 '18 at 20:53

Passing components into another in react

2 Answers2