Passing an array of Components as a Props in React - reactjs

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