psych0groov3
psych0groov3

Reputation: 701

MUI (Material UI) Toggle Button Group useState Hook in React.js

I have the following in my App.js:

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

function App() {
  const [view, setView] = useState("list");

  const handleView = (event, newView) => {
    setView(newView);
  };

  return (
    <Box>
      <Header view={view} onChange={handleView} />
      <ProjectList />
      <CardLayout />
    </Box>
  );
}

export default App;

The goal is to render only the ProjectList component when the toggle button with value list is selected <ToggleButton value={props.list}> and render only CardLayout component when the toggle button with value grid is selected <ToggleButton value={props.grid}>

My Header.js component (button section) is this:

  <ToggleButtonGroup
    size="large"
    value={props.view}
    onChange={props.onChange}
    exclusive
  >
    <ToggleButton value={props.list}>
      <TableRowsIcon />
    </ToggleButton>
    <ToggleButton value={props.grid}>
      <GridViewIcon />
    </ToggleButton>
  </ToggleButtonGroup>

Am I passing in the props from parent to child correctly? What should the setView function be?

Upvotes: 0

Views: 3312

Answers (3)

psych0groov3
psych0groov3

Reputation: 701

For anyone reading this in the future, I figured it out: The toggle button group should look like this:

<ToggleButtonGroup
            size="large"
            value={props.view}
            exclusive
            onChange={props.onSetView}
          >
            <ToggleButton value="list">
              <TableRowsIcon />
            </ToggleButton>
            <ToggleButton value="grid">
              <GridViewIcon />
            </ToggleButton>
          </ToggleButtonGroup>

And in the App.js the setViewHandler has to have this if condition in order for the toggle to work properly:

  const setViewHandler = (event, newView) => {
    if (newView !== null) {
      setView(newView);
    }
    console.log(view);
  };

Then, you simply pass this function as a prop to the child component where the button is located.

Upvotes: 1

Arash Ghazi
Arash Ghazi

Reputation: 991

  • I think instead this code <ToggleButton value={props.list}> you must write <ToggleButton value='List'> because 'list' is value not property
  • if you use class components don't forget this. before props in the header component

Upvotes: 1

Luka Cerrutti
Luka Cerrutti

Reputation: 707

You can simply use conditional rendering to achieve this.

For example, in your App.js, change this:

<ProjectList />

to this:

{ view == list ?? <ProjectList /> }

That will render <ProjectList /> ONLY IF view == list. You will need to create another state to handle the CardLayout rendering.

More information about conditional rendering can be found on the official docs: https://beta.reactjs.org/learn#conditional-rendering

Upvotes: 1

Related Questions