Pass the Material UI Tab heading as a URL parameter React - reactjs

Question

I want to pass the selected date as a parameter when the showtime button is clicked. I couldn't find a way and I'm new to React. looking for suggestions.
Following is my code
import React, { useEffect, useState }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";
import Button from '#material-ui/core/Button';
import queryString from 'query-string';
import { Link, useLocation } from 'react-router-dom';
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 [venuesDates, setvenuesDates] = React.useState([]);
const [showtimesData] = React.useState([]);
useEffect(() => {
const url = "http://sandbox-api.tickets.lk/v1/movie/3232/showtime";
const requestOptions = (token) => {
return ({
method: 'GET',
headers: { 'Content-Type': 'application/json', 'client_token': 'ebd86470-7e90-4ece-9e89-1b6d4d2cbb61' }
})
};
const fetchData = async () => {
try {
const response = await fetch(url, requestOptions());
const json = await response.json();
// console.log(json);
// console.log(json.data.venueDateShowtime)
setvenuesDates(json.data.venueDateShowtime);
}
catch (error) {
console.log("error",error);
}
};
fetchData();
})
const search = useLocation().search;
const Mid = new URLSearchParams(search).get('movieid');
const Mname = new URLSearchParams(search).get('name');
// console.log(Mname)
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
>
{venuesDates.map((showtdates) => {
return (
<Tab
label={showtdates.date}
{...a11yProps(0)}
style={{ color: "#fff", fontSize: 20, minHeight: 60 }}
/>
);
})}
</Tabs>
</AppBar>
{/* map over dates and create TabPanel */}
{/* // check if theater property exists and create a list of theaters as an example */}
{venuesDates.map((date, idx) => {
const venues = date.hasOwnProperty("venues")
? date.venues.map((venues) => (
<ListItem>
<ListItemText
primary={venues.venue}
secondary={venues.venueId}
/>
{date.venues.map((date)=> {
const showtimes = venues.hasOwnProperty("showtimes")
? venues.showtimes.map((showtimes) => (
// <ListItemText primary={showtimes.showtime} />
<Link to={'/seat-booking?movieid=' + Mid +"&name=" + Mname + "&theater=" + venues.venueId +
"&movieDate=" + "showtdates.date" + "&showtimes=" + showtimes.showtimeId}
style={{ textDecoration: 'none', color: 'white' }}>
<Button variant="contained" color="primary" style={{margin:5}}>
{showtimes.showtime}
</Button>
</Link>
))
:null;
return(
<List>{showtimes}</List>
)
})}
</ListItem>
))
: null;
return (
<TabPanel value={value} index={idx}>
<List>{venues}</List>
</TabPanel>
);
})}
</div>
);
}
I really want to get the selected date from the Tab heading and pass as a parameter as mentioned below.
I need to change the "&movieDate=" + "showtdates.date" ===> as "&movieDate=" + (selected tab heading name)
{date.venues.map((date)=> {
const showtimes = venues.hasOwnProperty("showtimes")
? venues.showtimes.map((showtimes) => (
// <ListItemText primary={showtimes.showtime} />
<Link to={'/seat-booking?movieid=' + Mid +"&name=" + Mname + "&theater=" + venues.venueId +
"&movieDate=" + "showtdates.date" + "&showtimes=" + showtimes.showtimeId}
style={{ textDecoration: 'none', color: 'white' }}>
<Button variant="contained" color="primary" style={{margin:5}}>
{showtimes.showtime}
</Button>
</Link>
))
:null;
return(
<List>{showtimes}</List>
)
})}