I have several pages that I navigate to using a Material UI Select component. That component is shared among all the pages. I have a Toolbar on one of the pages with components specific to that page. I’d like to programmatically change the state of those components (eg. hidden or disabled) depending on different conditions on the page.

I’d also like to swap out toolbars depending on which page I’m on. Seems like a basic need but the MUI docs don’t show how to do it.

Here’s some code to show what I mean. FoodToolbar component is currently shared on each page. I want the Box component to be shared on each page, but the tool bar should be programmatically modifyable, or swappable, depending on which page I’m on.

FoodToolbar.js

export default function FoodToolbar() {
  const [foodPage, setFoodPage] = React.useState('');

  const handleChange = (event) => {
    const value = event.target.value;
    navigate(`/${value}`);
    setFoodPage(value);
    localStorage.setItem("foodPage",value);
  };

  const navigate = useNavigate();

  return (
    <><div class='food-select'>
      <Box class='box' sx={{ minWidth: 120 }}>
        <FormControl sx={{ minWidth: 160 }} size="small">
          <InputLabel>Select Food Page</InputLabel>
          <Select class='food-select'
            value={localStorage.getItem("foodPage")}
            label="Select Food Page"
            onChange={handleChange}
          >
            <MenuItem value="branded-foods">Branded Foods</MenuItem>
            <MenuItem value="whole-foods">Whole Foods</MenuItem>
            <MenuItem value="my-foods">My Foods</MenuItem>
            <MenuItem value="meals">Meals</MenuItem>
            <MenuItem value="nutrients">Nutrients</MenuItem>
          </Select>
        </FormControl>
      </Box>
    </div>
    <div class='food-toolbar'>
        <Tooltip title="Add Food">
          <IconButton>
            <IoMdAdd />
          </IconButton>
        </Tooltip>
        <Tooltip title="Delete">
          <IconButton>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Copy to My Foods">
          <IconButton>
            <LuMoveRight />
          </IconButton>
        </Tooltip>
        <Tooltip title="Filter list">
          <IconButton>
            <FilterListIcon />
          </IconButton>
        </Tooltip>
      </div></>
  )
}

Navbar.css sets the look and feel of the Select dropdown, and the toolbar. The display: flex, flex-direction: row, and float:left puts them on the same row.

Navbar.css

.food-toolbar {
  padding-top: 19px;
  padding-left: 180px;
}

.food-select {
  background:white;
  color: green;
  display: flex;
  flex-direction: row;
  float:left;
}

Any suggestions?