Switch between views in react.js

Question

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

Here is the code:

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

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 (
    <Box>
      <Header />
      <ProjectList />
      <CardLayout />
    </Box>
  );
}

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!

Parag Diwan · Accepted Answer · 2022-02-28 04:56:42Z

2

You can better refactor like this-

<SwitchBetweenLayout>
      <Layout layout={selectedLayout} />
</SwitchBetweenLayout>

The actual component like this -

function SwitchBetweenLayout() {
  const [layout, setLayout] = useState('listView');

  onClickButton(event) {
    const currentLayout = event.target.value; // gets 'listView or gridView
    setLayout(currentLayout); // only set if state is changed.
  }

  return (
    //HTML for 2 buttons with click handler

    <LayoutView layout={layout} /> 

  )
}

LayoutView would switch between the layout based on this prop

function LayoutView(props) { 
 const layout = props.layout;

 return(
    layout === 'gridView'? <GridView /> : <ListView />
 )
}

edited Feb 28, 2022 at 4:56

answered Feb 28, 2022 at 4:35

Parag Diwan

1577 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Posandu · Accepted Answer · 2022-02-28 04:18:39Z

1

You can try

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [activepage, setactivepage] = useState(1);
  return (
    <>
      <h1>Change page!</h1>
      <button
        variant="contained"
        color="primary"
        onClick={() => {
          setactivepage(!activepage);
        }}
      >
        Change active page
      </button>
      {activepage ? <p>Page 1</p> : <p>Page 2</p>}
    </>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

answered Feb 28, 2022 at 4:18

Posandu

5737 silver badges19 bronze badges

1 Comment

psych0groov3 Over a year ago

Thank you! In my case I have two buttons though not just one and the button is in a child component. The onClick is in the Header.js component but the components I want to render are in the App.js. Where do I use the useState hook in this case? I assume it should be in the main app but then the button can't access the handler function

Collectives™ on Stack Overflow

Switch between views in react.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related