switch from material ui lists on/off

Question

switch from material ui lists on/off

Trying to learn React through coding, I've encountered an issue with displaying the 'StarBorder' icon next to folders when clicked. Currently, clicking on any folder displays the 'StarBorder' icon for all folders. Any tips on how to ensure that it only appears on the folder that is clicked? The icon should appear only when 'console.log("check state", toggleSiteCheckmark)' returns true. If a selected folder is clicked again, the 'StarBorder' should hide as a toggle.

You can test it out here: https://codesandbox.io/s/nestedlist-demo-material-ui-forked-pul8sk?file=/demo.tsx:0-2556

Below is the code snippet:

import React, { useEffect, useRef, useState } from "react";

import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import InboxIcon from "@mui/icons-material/MoveToInbox";

import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";

export default function NestedList() {
  const [open, setOpen] = useState(true);

  const [toggleSiteCheckmark, setToggleSiteCheckmark] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  const handleSelected = () => {
    setToggleSiteCheckmark(!toggleSiteCheckmark);
  };

  console.log("check state", toggleSiteCheckmark);

  return (
    <List
      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
    >
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Folder" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItemButton onClick={handleSelected} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItemButton>
          <ListItemButton onClick={handleSelected} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Sent Items" />
          </ListItemButton>
          <ListItemButton onClick={handleSelected} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Deleted Items" />
          </ListItemButton>
          <ListItemButton onClick={handleSelected} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Archieve" />
          </ListItemButton>
        </List>
      </Collapse>
    </List>
  );
}

English is not my native language, so there may be errors.

javascript css reactjs arrays material-ui

Answer 1

Answer №1

The issue arises from using the same condition for all folders. To resolve this, unique values must be assigned to each folder by utilizing arrays.

For a detailed example, refer to this code sandbox

Alternatively, examine the provided code snippet:

import React, { useEffect, useRef, useState } from "react";

// List of Material-UI components
...
export default function NestedList() {
  // State variables initialization
  ...

  const folders = ["Inbox", "Sent Items", "Deleted Items", "Archieve"];

  // Click event handler
  ...
}

Answer 2

The issue arises from using the same condition for all folders. To resolve this, unique values must be assigned to each folder by utilizing arrays.

For a detailed example, refer to this code sandbox

Alternatively, examine the provided code snippet:

import React, { useEffect, useRef, useState } from "react";

// List of Material-UI components
...
export default function NestedList() {
  // State variables initialization
  ...

  const folders = ["Inbox", "Sent Items", "Deleted Items", "Archieve"];

  // Click event handler
  ...
}

Answer 3

Answer №2

You are on the right track towards finding a solution. The issue lies in using a single boolean flag toggleSiteChecked to determine if each field is checked, instead of checking them individually. With your current approach, if toggleSiteChecked == true, all fields will behave in the same way.

I have made some modifications to your code below to assign a unique value to each item.

Update: I have also included logic in handleSelected() to unmark a field if it is already marked.

import React, { useEffect, useRef, useState } from "react";

import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import InboxIcon from "@mui/icons-material/MoveToInbox";

import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";

export default function NestedList() {
  const [open, setOpen] = useState(true);

  const [toggleSiteCheckmark, setToggleSiteCheckmark] = useState(null);

  const handleClick = () => {
    setOpen(!open);
  };

  const handleSelected = (value) => {
    // Unmark if already marked
    if (value === toggleSiteCheckmark) {
        setToggleSiteCheckmark(null);
    } else {
        setToggleSiteCheckmark(value);
    }
  };

  console.log("check state", toggleSiteCheckmark);

  return (
    <List
      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
    >
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Folder" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItemButton onClick={() => handleSelected('Inbox')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'Inbox' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('SentItems')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark  === 'SentItems' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Sent Items" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('DeletedItems')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'DeletedItems' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Deleted Items" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('Archive')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'Archive' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Archive" />
          </ListItemButton>
        </List>
      </Collapse>
    </List>
  );
}

Answer 4

You are on the right track towards finding a solution. The issue lies in using a single boolean flag toggleSiteChecked to determine if each field is checked, instead of checking them individually. With your current approach, if toggleSiteChecked == true, all fields will behave in the same way.

I have made some modifications to your code below to assign a unique value to each item.

Update: I have also included logic in handleSelected() to unmark a field if it is already marked.

import React, { useEffect, useRef, useState } from "react";

import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import InboxIcon from "@mui/icons-material/MoveToInbox";

import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";

export default function NestedList() {
  const [open, setOpen] = useState(true);

  const [toggleSiteCheckmark, setToggleSiteCheckmark] = useState(null);

  const handleClick = () => {
    setOpen(!open);
  };

  const handleSelected = (value) => {
    // Unmark if already marked
    if (value === toggleSiteCheckmark) {
        setToggleSiteCheckmark(null);
    } else {
        setToggleSiteCheckmark(value);
    }
  };

  console.log("check state", toggleSiteCheckmark);

  return (
    <List
      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
    >
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Folder" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItemButton onClick={() => handleSelected('Inbox')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'Inbox' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('SentItems')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark  === 'SentItems' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Sent Items" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('DeletedItems')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'DeletedItems' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Deleted Items" />
          </ListItemButton>
          <ListItemButton onClick={() => handleSelected('Archive')} sx={{ pl: 4 }}>
            <ListItemIcon>{toggleSiteCheckmark === 'Archive' && <StarBorder />}</ListItemIcon>
            <ListItemText primary="Archive" />
          </ListItemButton>
        </List>
      </Collapse>
    </List>
  );
}

switch from material ui lists on/off

Answer №1

Answer №2

Similar questions

Displaying a box with a question mark using Glyphicon and Font Awesome icons

Color Swap Hover Animation

In Angular components, data cannot be updated without refreshing the page when using setInterval()

What is the best way to save functions that can be utilized in both Vue front-end and Node back-end environments at the same time?

Enforcing the autocompletion selection in jQuery UI

Responsive Text and Alignment in the Latest Bootstrap 5

I am encountering an error when trying to fetch a JSON response from a PHP script, even though I am able

Click action: two functions, but only the first one seems to be functioning. Feeling frustrated

Error: The value of 'id' cannot be assigned to an undefined property

Upon successful authorization, the Node Express server will pass the access token to the React client app via OAuth in the callback

Adjust the HTML layout based on the JSON data provided

PHP functions triggered by ajax fail to function properly when called repeatedly

Unable to display individual elements of an array using the map function in React Native

How can I incorporate sublists into my Note application using ReactJS?

What is the best way to extract all ID, Name values, and locations from my JSON object and store them in an

Struggling to deal with conditionals in Express

Passing a variable from JavaScript to PHP, utilizing the variable in an SQL query, and showcasing the results through PHP

What is the best way to add elements to a PHP array after cross-referencing it with another array using their keys?

Updating the state in React is only possible for a component that is currently mounted or in the

The Chrome browser allows interaction between two separate divs, where a button located in one div can impact