Having trouble integrating the accordian.js page into the app.js main page for compilation. Need help defining and writing out the function correctly, any suggestions?
Below is my code:
App.js: How do I incorporate the components from the accordian.js page into this app.js file?
import React from 'react'
import Typography from '@material-ui/core/Typography'
import Tabs from './Components/Tabs'
import Accordian from './Components/Accordian'
const data = {
categories: [
{
name: 'Faces',
subCategories: [{ name: 'Yellow', symbols: ['X', 'O', 'P'] }],
},
{
name: 'Flags',
subCategories: [
{ name: 'Popular', symbols: ['X', 'O', 'P'] },
{ name: 'Unknown', symbols: ['L', 'Z', 'Q'] },
],
},
{
name: 'Numbers',
subCategories: [
{ name: 'Big', symbols: ['X', 'O', 'P'] },
{ name: 'Small', symbols: ['L', 'Z', 'Q'] },
{ name: 'Random', symbols: ['R', 'T', 'M'] },
],
},
],
}
const App = () => {
const [tabIndex, setTabIndex] = React.useState(0)
const handleTabChange = (event, newTabIndex) => {
setTabIndex(newTabIndex)
}
return (
<>
<Accordian heading={subCat.name}>
{subCat.symbols.map((symbol) => (
<div>{symbol}</div>
))}
</Accordian>
<div className="App">
<header className="App-header">Something</header>
<Typography variant="h3">Placeholder_Symbols</Typography>
<Tabs
tab={tabIndex}
tabs={data.categories}
handleChange={handleTabChange}
/>
<Accordian
heading={subCat.name}
children={subCat.symbols}
/>
</div>
</>
)
}
export default AppAccordian.js: Implemented a map function for app.js, unsure about how to define 'subCat' and if it's done correctly - encountering errors.
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import ExpansionPanel from '@material-ui/core/ExpansionPanel'
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import Typography from '@material-ui/core/Typography'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
export default function SimpleExpansionPanel({ heading, children }) {
const classes = useStyles()
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>{heading}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>{children}</ExpansionPanelDetails>
</ExpansionPanel>
</div>
)
}