How to map a array to create nodes in material UI

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

Divya Sakariya · Accepted Answer · 2021-10-25 04:47:10Z

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

answered Oct 25, 2021 at 4:47

Divya Sakariya

5175 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlcoholAllergy Over a year ago

Thank you so much! I actualy tried the callback function but didn't work, because I started my array as index 1.......OMG. It fixed after I changed it to 0.

Collectives™ on Stack Overflow

How to map a array to create nodes in material UI

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related