ReactJs 使用状态数组 Map

Question

Hello I have doubts on how I can do this in react using useState, basically i have this menu where i need to map, i basically need a state containing all tags, and with boolean state true or false to know if the current item is active, and i will make it active by clicking on the item, and deactivate it when another item is clicked

that is, only one menu item active at a time

export const SideBarTags = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: faFileAlt,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: faNewspaper,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: faMeteor,
    active: false,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: faWallet,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

and my TSX:

const MenuTags: React.FC<Hamburguer> = ({ isOpen }) => {
    const [menuTags, setMenuTags] = useState(SideBarTags.map());

  return (
    <DashMenu open={isOpen}>
    <MenuItem /> //(this is my tag <li>
    </DashMenu>
  );
};



const MenuItem: React.FC = () => {


  return (
    <ListItem>
      <ListWrap

      >
        <a>
          <FontAwesomeIcon
            className="icon-li"
            icon={icon}
            size={isOpen ? 'lg' : 'lg'}
            fixedWidth
            color="white"
          />
          <span
            className="li-name"
          >
            {name}
          </span>
        </a>
    </ListItem>
  );
};

Answer 1

Super simplified version of what I did in a past project:

const MenuTags = () => {
  const [selectedLink, setSelectedLink] = useState(null)

  return (
    <ul>
      {SideBarTags.map((obj) => (
        <li className={`${selectedLink === obj.name ? 'link--selected' : ''}`}>
          <a
            onClick={() => {
              setSelectedLink(obj.name)
            }}
            href={obj.link}
          >
            {obj.name}
          </a>
        </li>
      ))}
    </ul>
  )
}

Use CSS to open and close the menu items, by having a class such as 'link--selected' added to an element you can just show that item.

Answer 2

Component logic if you wanted to map the menu items with the active item

const [menuItems, setMenuItems] = useState(SideBarTags);

const clickHandler = name => () => {
  setMenuItems(items =>
    items.map(item => ({
      ...item,
      active: item.name === name
    }))
  );
};

...

{menuItems.map(item => (
  <li
    key={item.name}
    className={item.active ? "active" : ""}
    onClick={clickHandler(item.name)}
  >
    {item.name}
  </li>
))}

CSS

.active {
  // could be whatever style you need
  color: red;
}