How to pass a react component as a variable, to child component? - reactjs

Question

When I have defined a component in a variable, and I am trying to pass it to a component as a children prop, Objects are not valid as a React child error is shown.
What is a correct way to do this?
function AnotherComponent(){
return "Another";
}
function ChildComponent(props) {
const { children, value, index, ...other } = props;
console.log(children);
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
<Box p={3}>{children}</Box>
</Typography>
);
}
function MainComponent(){
const tabItems = [
{ "component": AnotherComponent}
];
const [value, setValue] = React.useState(0);
return (
<>
{tabItems.map((tabItem,index) => (
<ChildComponent value={value} index={tabItem.index}>
{tabItem.component}
</ChildComponent>
))}
</>
)
}

Answer 1

tabItem.component is just an object. This should work :
{tabItems.map((tabItem, index) => {
const TheComponent = tabItem.component;
return (
<TabPanel value={value} index={tabItem.index}>
<TheComponent />
</TabPanel>
);
})}

Answer 2

The problem is the way you initialise the array is really just assigning a function into it. Exactly as error says - you cant render a function. You have to wrap that function into JSX syntax to do the whole React.createChild thingy.
So just change this line
const tabItems = [
{ "component": AnotherComponent}
];
to this:
const tabItems = [
{ "component": <AnotherComponent />}
];
and it will work like a charm. :)