How to map a array to create nodes in material UI - reactjs

Question

I need to create bunch of Tab nodes in a Tabs. I thought that map a array would be easier to manage it. But I was kind of don't know how to make it works with MATERIAL UI Taps components.
My target is when I click the tab, the TabPanel supposed to show the correct components pending on the index.
The Tabs part works just fine, and it will be siwtch components properly if I keep the TabPanel one by one. But it won't be work if I map the array to create the TabPanel.
Please advise how to fix it.
//TODO set the router for each tab, wondering if it could be done in an array and map it
const tab_item = [
{
index: 1,
label: 'Purchase',
path: '/Linx_Homeline/Purchase',
tabPanel_comp:<LawyerPurchase />
},
{
index: 2,
label: 'Refinance',
path: '/Linx_Homeline/Refinance',
tabPanel_comp:<Refinance />
},
// {},
]
function TabPanel(props) {
const { children, value, index } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`wrapped-tabpanel-${index}`}
>
{value === index && (
<Box p={3}>
<Typography component={'div'}>{children}</Typography>
</Box>
)}
</div>
);
}
// TabPanel.propTypes = {
// // children: PropTypes.node,
// index: PropTypes.any,
// value: PropTypes.any,
// };
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.background.paper,
},
item: {
minWidth: '0px'
}
}));
export default function TabsWrappedLabel() {
const classes = useStyles();
const [value, setValue] = React.useState(false);
const updateNotes = useContext(NotesUpdate);
const history = useHistory();
const handleChange = (event, newValue) => {
setValue(newValue);
};
const clean_notes_push = (item) => {
//comments
updateNotes.setCondition('');
updateNotes.setFunNotes('');
updateNotes.setBusNotes('');
history.push(item.path);
}
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs
value={value}
onChange={handleChange}
variant='fullWidth'
TabIndicatorProps={{ style: { background: '#00ff33' } }}
>
{tab_item.map((item) => ( // The Tab works fine here.
<Tab
wrapped
key={item.index}
index={item.index}
label={item.label}
onClick={() => (clean_notes_push(item))}
/>
))}
</Tabs>
</AppBar>
{/* <TabPanel value={value} index={0}> // It works if I put the TabPanel one by one, but I'm trying to map the tab_item array to generate them, problem is I don't know how to make it works.
<LawyerPurchase/>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Two
</TabPanel>
*/}
{tab_item.map((item) => ( // Not working here, not even generate a TabPanel
<TabPanel
key={item.index}
value={value}
index={1}
>
{item.tabPanel_comp}
</TabPanel>
))}
</div>
);
}

Answer 1

You may need to update the tab_item object by:
//TODO Declare the function to render the component in a tab pane
const tab_item = [
{
index: 1,
label: 'Purchase',
path: '/Linx_Homeline/Purchase',
tabPanel_comp: () => <LawyerPurchase /> // function returns the component
},
{
index: 2,
label: 'Refinance',
path: '/Linx_Homeline/Refinance',
tabPanel_comp: () => <Refinance />
},
]
And replace the TabPanel render map function by:
{tab_item.map((item) => ( // Not working here, not even generate a TabPanel
<TabPanel
key={item.index}
value={value}
index={1}
>
{item.tabPanel_comp()} //calls the function to render the component
</TabPanel>
))}