I'm trying to find out how to work with Matherial UI library in React. So I downloaded the Dashboard free template. And I stuck with the following issue:
...
import {mainListItems} from './listItems';
...
function DashboardContent() {
...
return (
...
<List component="nav">
<ListSubheader component="div" >
Выбрать технику
</ListSubheader>
{equipmentChoice}
<ListSubheader component="div" disableSticky={true}>
Загрузить отчёты
</ListSubheader>
{mainListItems} // How to pass data in this component???
</List>
...
export default function Dashboard() {
return <DashboardContent />;
}
Also, I have a file listItems.js. But it does not contain function component nor class component, just a constant with a list of JSX-tags instead. This is so unusual for me that I don't inderstand how to work with this file.
import * as React from 'react';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import HourglassEmpty from '@mui/icons-material/HourglassEmpty';
import HourglassBottom from '@mui/icons-material/HourglassBottom';
import HourglassFull from '@mui/icons-material/HourglassFull';
export const mainListItems = (
<React.Fragment>
<ListItemButton>
<ListItemIcon>
<HourglassEmpty />
</ListItemIcon>
<ListItemText primary="Don't know how to change" /> // I need to change this from Dashboard.js component
</ListItemButton>
</React.Fragment>
);
How to use Hook like useState in such situation?
Ivan, welcome to Stackoverflow. Your ListItems.js component can also be represented as shown below.
import * as React from 'react';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import HourglassEmpty from '@mui/icons-material/HourglassEmpty';
import HourglassBottom from '@mui/icons-material/HourglassBottom';
import HourglassFull from '@mui/icons-material/HourglassFull';
export function mainListItems(){
// You can use useState hook here
return (
<React.Fragment>
<ListItemButton>
<ListItemIcon>
<HourglassEmpty />
</ListItemIcon>
<ListItemText primary="Don't know how to change" /> // I need to change this
</ListItemButton>
</React.Fragment>
);
}
You can use hooks inside this function.