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:

Dashboards.js (high order component):

...
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.

ListItems.js

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?

CodePudding user response：

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.