Reactjs 单击三个按钮之一后如何显示特定按钮的内容单击其中一个按钮后应隐藏所有按钮

目标:在单击三个按钮中的一个按钮后，我应该显示特定按钮的特定内容.然后，在单击特定按钮后，所有三个按钮都应该隐藏，并替换为所单击的特定按钮的内容.

问题:我try 传递props 并在条件呈现方面使用If-Else语句，但由于其余If-Else语句被忽略，因此我很难弄清楚如何正确地声明该功能工作的条件.只有牛肉按钮在工作，但其他按钮都不工作.

源代码:

import * as React from "react";
import { Stack } from '@mui/material';
import FoodTraysItemButton from "./FoodTraysItemButton";
import PastaNoodlesButtonsFT from "./foodTraysPages/PastaNoodlesButtonsFT";
import DessertsButtonsFT from "./foodTraysPages/DessertsButtonsFT";
import BeefButtonsFT from "./foodTraysPages/BeefButtonsFT";
import { useState } from "react";

function preventDefault(event) {
  event.preventDefault();
}

export default function FoodTraysButtons(props) {
  const [myBoolBeef, setmyBoolBeef] = useState(true);
  const [myBoolDesserts, setmyBoolDesserts] = useState(true);
  const [myBoolPastaNoodles, setmyBoolPastaNoodles] = useState(true);
  
   function toggleBoolBeef() {
     setmyBoolBeef(!myBoolBeef);
   }

    function toggleBoolDesserts() {
      setmyBoolDesserts(!myBoolDesserts);
    } 

    function toggleBoolPastaNoodles() {
      setmyBoolPastaNoodles(!myBoolPastaNoodles);
    }

  return (
    // stuck here:   (I plan to use multiple separate if else statements to work the functionality out but it doesn't work)
    <React.Fragment> 
     {(() => {
         // only works here
        if (myBoolBeef) {
          return (<Landing toggleBoolBeef={toggleBoolBeef} />);
        } else{
          return <BeefFT/>;
        }
      
// these are ignored:
        if (myBoolDesserts) {
          return (<Landing toggleBoolDesserts={toggleBoolDesserts} />);
        } else{
          return <DessertsFT/>;
        } 

        if (myBoolPastaNoodles) {
          return (<Landing toggleBoolPastaNoodles={toggleBoolPastaNoodles} />);
        } else{
          return <PastaNoodlesFT/>;
        } 


      })()}
    </React.Fragment>
  );

}

function Landing(props) {
  return (
    <div>
      <Stack spacing={0} direction="row" sx={{ mb: 4.5 }}>
        <FoodTraysItemButton
          title="Beef"
          onClick={props.toggleBoolBeef}
        />
      
        <FoodTraysItemButton
          title="Desserts"
          onClick={props.toggleBoolDesserts}
        />
        <FoodTraysItemButton title="Pasta/Noodles" onClick={props.toggleBoolPastaNoodles} />
      
      </Stack>
     

    </div>
  );
}

function BeefFT() {
  return (
    <div>
      <BeefButtonsFT />
    </div>
  );
}


function DessertsFT() {
  return (
    <div>
      <DessertsButtonsFT />
    </div>
  );
}

function PastaNoodlesFT() {
  return (
    <div>
      <PastaNoodlesButtonsFT />
    </div>
  );
}

Codesandbox中的完整源代码:https://codesandbox.io/s/show-hide-buttons-ralph-ecv9g2?file=/src/FoodTraysButtons.jsx:773-815

它应该是什么样子的:

Beef button:

Desserts button:

Pasta Noodles button:

为了实现它的功能，我应该以什么方式实现它？

您的回复将非常感谢，因为我正在探索MUI和react 的时刻.这会对我的项目有很大的帮助.非常感谢！