reactjs – Switch between views in react.js

I have this toggle button group in my Header.js component:


Here is the code:

<ToggleButtonGroup size="large">
              <TableRowsIcon />
              <GridViewIcon />

In the main App.js, I have two components: ProjectList (which is a table) and CardLayout (which is a grid) like this:

import { Box } from "@mui/system";
import Header from "./components/Header";
import ProjectList from "./components/ProjectList";
import CardLayout from "./components/CardLayout";    

function App() {
  return (
      <Header />
      <ProjectList />
      <CardLayout />

export default App;

My goal is to render only the ProjectList when the left button is clicked and to render only CardLayout when the right button is clicked.

Essentially, I want to switch views depending on which button is clicked.

Do I need to use a hook for this? I’m new to react.js so I would appreciate any help. Thanks!

Read more here: Source link