将鼠标悬停在图标上时显示文本

Question

我有一个图标列表，将鼠标悬停在每个图标上时，我试图显示它们的代表名称。 我有两个文件： 一个（index.js），它创建每个图标的属性的对象列表， 两个（sidebar.js），将创建的图标列表呈现到边栏。 我试图解决index文件中的问题，但是我认为这样做的方式不正确。 有没有办法可以实现这一目标。解决方案不必位于index文件中。

以下是我的代码的一些简短示例： index.js：-

import React, {useState} from "react";

import async from "../components/Async";

import {
  Home,
  Briefcase,
  Square,
  Calendar
} from "react-feather";


// Dashboards components
const Clusters = async(() => import("../pages/dashboards/Clusters"));
const Schedules = async(() => import("../pages/dashboards/Schedules"));
const UserTasksRun = async(() => import("../pages/dashboards/UserTasksRun"));
const Tasks = async(() => import("../pages/dashboards/Tasks"));


  const [isShown, setIsShown] = useState(false); //I made this attempt

  const homeRoutes = {
    path: "/",
    icon: <Home onMouseEnter={() => setIsShown(true)}  onMouseLeave={() => setIsShown(false)}/>,
    id:  isShown? 'Home':'',
    component: Clusters
  }; //this is an example of what I am trying to achieve with this icon. 
  
  const taskRoutes = {
     id: "Tasks",
    path: "/tasks",
    icon: <Briefcase />,
    component: Tasks
  };

export const dashboard = [
  homeRoutes,
  taskRoutes
];


export default [
  homeRoutes,
  taskRoutes
];

sidebar.js：-

import React from "react";
import routes from "./index";
....
....
class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Drawer variant="permanent" {...other}>
        <Scrollbar>
          <List disablePadding>
            <Items>
              {routes.map((category, index) => (
                <React.Fragment key={index}>
                    <IconContainer>
                    <SidebarCategory
                      isCollapsable={false}
                      to={category.path}
                      activeClassName="active"
                      component={NavLink}
                      icon={category.icon}
                      name = {category.id} //name is displayed here but should be displayed on when an icon is hovered.
                      exact
                      badge={category.badge}
                    />
                    </IconContainer>
                  )}
                </React.Fragment>
              ))}
            </Items>
          </List>
        </Scrollbar>
      </Drawer>
    );
  }
}