Passing an array of Components as a Props in React

Question

I am looking for a way to pass an array of components to a prop for a tabbing component. Just wondering if that's possible.

So I need to create a component that will shorten material ui's tabbing method but I cannot find a way to pass an array of components as a prop so that it will be rendered on that component.

Here is an example of my code:

<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>

And I map them on my code like this and I used lodash map method:

map(components, component=>{

 <TabContainer>{component}</TabContainer>

}

But it returns this. Warning: react-swipeable-view: one of the children provided is invalid: null. We are expecting a valid React Element

And when I console.log the component it returns: {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}} Object Need help

I hope it can render the components.

Answer 1

Component's name must be started with a capital letter, but I can see here components = [<component1/>, <component2/>] they were not. So you must convert [<component1/>, <component2/>] to [<Component1/>, <Component2/>]. Second thing I see your map syntax is strange, it must be like this:

components.map(component => (<TabContainer>{component}</TabContainer>))

Reference: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Answer 2

I solved This with another implementation.

I used 'react-swipeable-views' and instead passing a component I used this

       <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
            index={this.state.value}
            onChangeIndex={this.handleChangeIndex}
        >
            { children }
        </SwipeableViews>

And Changed:

<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>

To

<FullWidthTab
 components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
>
  <Component1/>
  <Component2/>
</FullWidthTab>

But if you can get how to pass components via props that would be great!

Answer 3

Cause you need return a value in map.

map(components, component=>{

 return <TabContainer>{component}</TabContainer>

}

Answer 4

Your es6 syntax needs a subtle adjustment to return the react component.

map(components, component => <TabContainer>{component}</TabContainer> )

or, if you can use the map function from your array instead of importing from a library.

components.map( component => <TabContainer>{component}</TabContainer> )