Data driven Tabs with Material UI React - reactjs

Question

I want to render Tabs & Tabpanels with the data array which I got.
I have rendered the Tab headings but I couldn't render the Tabpanel data when the Tabs are clicked. Following is my code.
I want to show the theaters for each date if the date Tab is selected.
I have tried many but failed. Appreciate your suggestions.
Thanks...
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import PhoneIcon from "#material-ui/icons/Phone";
import FavoriteIcon from "#material-ui/icons/Favorite";
import PersonPinIcon from "#material-ui/icons/PersonPin";
import HelpIcon from "#material-ui/icons/Help";
import ShoppingBasket from "#material-ui/icons/ShoppingBasket";
import ThumbDown from "#material-ui/icons/ThumbDown";
import ThumbUp from "#material-ui/icons/ThumbUp";
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import { DateRangeSharp } from "#material-ui/icons";
const DATES = [
{
id: 1,
day: "WED",
date: 19,
theater: [{ tname: "vista" }, { tname: "liberty" }],
},
{
id: 2,
day: "THU",
date: 20,
theater: [{ tname: "PVR" }, { tname: "CCC" }],
},
{
id: 3,
day: "FRI",
date: 21,
theater: [{ tname: "vista" }, { tname: "liberty" }],
},
{ id: 4, day: "SAT", date: 22 },
{ id: 5, day: "SUN", date: 23 },
{ id: 6, day: "MON", date: 24 },
{ id: 7, day: "TUE", date: 25 },
{ id: 8, day: "WED", date: 26 },
];
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`}
aria-labelledby={`scrollable-force-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `scrollable-force-tab-${index}`,
"aria-controls": `scrollable-force-tabpanel-${index}`,
};
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper,
},
}));
export default function ScrollableTabsButtonForce() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar
position="static"
style={{ background: "#333545", minHeight: 60 }}
>
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="secondary"
textColor="primary"
aria-label="scrollable force tabs example"
style={{ minHeight: 60 }}
wrapped
>
{DATES.map((showtdates) => {
return (
<Tab
label={showtdates.date + " " + showtdates.day}
{...a11yProps(0)}
style={{ color: "#fff", fontSize: 20, minHeight: 60 }}
/>
);
})}
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
showtdates.theater
</TabPanel>
</div>
);
}

Answer 1

For each day in your DATES array you have to create a TabPanel and pass the index and value as prop. You can easily do this by mapping over your DATES array. Inside your map function, you can access all properties and display the theaters.
As an example, I used the List component of material-ui to list the theaters.
This could then look like this:
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import PhoneIcon from "#material-ui/icons/Phone";
import FavoriteIcon from "#material-ui/icons/Favorite";
import PersonPinIcon from "#material-ui/icons/PersonPin";
import HelpIcon from "#material-ui/icons/Help";
import ShoppingBasket from "#material-ui/icons/ShoppingBasket";
import ThumbDown from "#material-ui/icons/ThumbDown";
import ThumbUp from "#material-ui/icons/ThumbUp";
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import { DateRangeSharp } from "#material-ui/icons";
import { List, ListItem, ListItemText } from "#material-ui/core";
const DATES = [
{
id: 1,
day: "WED",
date: 19,
theater: [{ tname: "vista" }, { tname: "liberty" }]
},
{
id: 2,
day: "THU",
date: 20,
theater: [{ tname: "PVR" }, { tname: "CCC" }]
},
{
id: 3,
day: "FRI",
date: 21,
theater: [{ tname: "vista" }, { tname: "liberty" }]
},
{ id: 4, day: "SAT", date: 22 },
{ id: 5, day: "SUN", date: 23 },
{ id: 6, day: "MON", date: 24 },
{ id: 7, day: "TUE", date: 25 },
{ id: 8, day: "WED", date: 26 }
];
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`}
aria-labelledby={`scrollable-force-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired
};
function a11yProps(index) {
return {
id: `scrollable-force-tab-${index}`,
"aria-controls": `scrollable-force-tabpanel-${index}`
};
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper
}
}));
export default function App() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar
position="static"
style={{ background: "#333545", minHeight: 60 }}
>
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="secondary"
textColor="primary"
aria-label="scrollable force tabs example"
style={{ minHeight: 60 }}
wrapped
>
{DATES.map((showtdates) => {
return (
<Tab
label={showtdates.date + " " + showtdates.day}
{...a11yProps(0)}
style={{ color: "#fff", fontSize: 20, minHeight: 60 }}
/>
);
})}
</Tabs>
</AppBar>
{/* map over dates and create TabPanel */}
{DATES.map((date, idx) => {
// check if theater property exists and create a list of theaters as an example
const theaters = date.hasOwnProperty('theater')
? date.theater.map((theater) => (
<ListItem>
<ListItemText primary="Theater name" secondary={theater.tname} />
</ListItem>
))
: null;
return (
<TabPanel value={value} index={idx}>
<List>{theaters}</List>
</TabPanel>
);
})}
</div>
);
}
Live demo: