MaterialUI Tabs not responsive

Hi guys!

I’m trying to create an appbar with tabs on it and then render it into my page using reactDOM, and it renders fine but clicking on a tab won’t change tab for some reason.

What I tried so far:

printing the value state and checking that it actually changes (it does) using the MUI example and seeing if it’s a browser thing (it isn’t) Rendering the appbar, tabs, and tabpanels separately which led to more issues.

Some relevant code:

const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); }; //json_links is a list of jsons that provides user information const ListOfTabs = json_links.map((link, index) => ( <Tab value={index} label={link[‘userName’]} {…a11yProps({index})} /> ) ) //TabPanel is taken from the material-ui example on tabs const ListOfTabPanels = json_links.map((link, index) => ( <TabPanel value={value} index={index}><Profile imagelist={link[‘images’]} username={link[‘userName’]}/></TabPanel>) ) let TabsElement = <div><AppBar id=”tabsAppBar” position=”static”><Tabs value={value} onChange={handleChange} aria-label=”simple tabs example”>{ListOfTabs}</Tabs></AppBar>{ListOfTabPanels}</div> ReactDOM.render(TabsElement, document.getElementById(“root”))

Expected behavior: users show in different tabs and a click switches users

Actual behavior: users show in different tabs and a click does nothing, it changes the state but the tab elements aren’t “notified” of the change and don’t respond

I’m not sure if this is exactly the place for asking questions but from what I read it’s not against the rules so thanks for the help I might get!