I've got buttons that represent sports. When a user clicks on a button a Popper is opened with the sport's associated component/content. The same Popper is shared between all the buttons.

This works fine, but once the Popper is open it requires two clicks to open the Popper for another sport. One click to close the Popper and the second click to open it. So if I click the 'Baseball' button, I'll have to click the 'Basketball' button twice before the Popper is reopened with the Basketball content.

Is there any way to accomplish this with just a single click? Link to Sandbox

import React, { useEffect, useState } from 'react';
import { Popper, Button, Paper, Typography } from "@material-ui/core";

function CategoryMenuItemContent(props) {
  return (
    <>
    <p>{props.menu.label}</p>
    <p>{props.menu.content}</p>
    </>
  );
}

export default function App() {

  const baseballCategory = {
        label: 'Baseball',
        content: <p>some content</p>
    };

    const basketballCategory = {
        label: 'Basketball',
        content: <p>some content</p>
    };

    const footballCategory = {
        label: 'Football',
        content: <p>some content</p>
    };

    const hockeyCategory = {
        label: 'Hockey',
        content: <p>some content</p>
    };
  
  const [activeCategoryMenuContent, setActiveCategoryMenuContent] = React.useState('baseball');
  
  const categoryMenuItemContentComponents = {
        "baseball": <CategoryMenuItemContent menu={baseballCategory} />,
        "basketball": <CategoryMenuItemContent menu={basketballCategory} />,
        "football": <CategoryMenuItemContent menu={footballCategory} />,
        "hockey": <CategoryMenuItemContent menu={hockeyCategory} />,
    };

  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
    setActiveCategoryMenuContent(event.currentTarget.textContent.toLowerCase());
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

  return (
    <>
      <Button onClick={(event) => {handleClick(event);}}>Baseball</Button>
      <Button onClick={(event) => {handleClick(event);}}>Basketball</Button>
      <Button onClick={(event) => {handleClick(event);}}>Football</Button>
      <Button onClick={(event) => {handleClick(event);}}>Hockey</Button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
      {activeCategoryMenuContent === 'baseball' && categoryMenuItemContentComponents['baseball']}
      {activeCategoryMenuContent === 'basketball' && categoryMenuItemContentComponents['basketball']}
      {activeCategoryMenuContent === 'football' && categoryMenuItemContentComponents['football']}
      {activeCategoryMenuContent === 'hockey' && categoryMenuItemContentComponents['hockey']}
      </Popper>
    </>
  );
}

CodePudding user response：

This would make more sense:

const handleClick = (event) => {
  if (anchorEl === event.currentTarget) {
    setAnchorEl(null)
    setActiveCategoryMenuContent('')
  } else {
    setAnchorEl(event.currentTarget); 
    setActiveCategoryMenuContent(event.currentTarget.textContent.toLowerCase())
  }
};