Prevent the Icon in Material UI from simultaneously changing

Question

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue?

Code:

import React from 'react';
import {makeStyles, Theme} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import FilterListIcon from '@material-ui/icons/FilterList';
import FavoriteBorderOutlinedIcon from '@material-ui/icons/FavoriteBorderOutlined';
import FavoriteOutlinedIcon from '@material-ui/icons/FavoriteOutlined';
...

export default function Table() {
    ...
        const [isFavorite, setIsFavorite] = React.useState(false);
    ...
    return (
        ...
                                    return (
                                        <TableRow
                                            hover
                                            tabIndex={-1}
                                            key={row.name}>
                                            <TableCell>{row.name}</TableCell>
                                            ...
                                            <TableCell>
                                                    <IconButton onClick={() => setIsFavorite(!isFavorite)}>
                                                        {isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  <FavoriteBorderOutlinedIcon color="action"/> }
                                                    </IconButton>
                                            </TableCell>
                                               ...
    );
}

javascript css reactjs typescript material-ui

Answer 1

Answer №1

Your state isFavorite is toggling with every click. To achieve the desired functionality, create a favorite property on an icon object as shown below:

const [iconData, setIconData] = useState([
  {icon: someIcon, id: 1, isFavorite: false},
  {icon: diffIcon, id: 2, isFavorite: false},
  {icon: thirdIcon, id: 3, isFavorite: false}
])

In the return statement, map over the iconData objects:

iconData.map(icon => (
<TableCell key={icon.id}>
    <IconButton onClick={() => iconFavChange(icon.id)}>
      {icon.isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  
           <FavoriteBorderOutlinedIcon color="action"/> }
     </IconButton>
</TableCell>
))

Function to handle icon change:

const iconFavChange =(id)=> {
 let updatedIconData = iconData.map(icon => icon.id === id ? icon.isFavorite = !icon.isFavorite : icon)
// Map over existing state data and toggle the isFavorite property if the id matches
 setIconData(updatedIconData)
}

Edit:

The row data was stored outside the component, so I added a slice of state using React.useState(rows) to set row as the initial state.

const [data, setData] = React.useState(rows);

An isFavorite property was added to your row data.

isFavorite: boolean;

A favorite handler function was included to toggle the isFavorite property by looping over the data based on the name passed as an argument.

const handleFavoriteToggle = name => {
    console.log(name);
    let updatedData = data.map(row => {
      if (row.name === name) {
        row.isFavorite = !row.isFavorite;
      }
      return row;
    });
    setData(updatedData);
};

The icon component was updated accordingly.

<IconButton onClick={() => handleFavoriteToggle(row.name)}>
    {row.isFavorite ? (<FavoriteOutlinedIcon color="secondary" />)
                    : (<FavoriteBorderOutlinedIcon color="action" />)}
</IconButton>

The parameter was changed from 'row' to our data slice of state.

<TableBody>
            {stableSort(data, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {

Answer 2

Your state isFavorite is toggling with every click. To achieve the desired functionality, create a favorite property on an icon object as shown below:

const [iconData, setIconData] = useState([
  {icon: someIcon, id: 1, isFavorite: false},
  {icon: diffIcon, id: 2, isFavorite: false},
  {icon: thirdIcon, id: 3, isFavorite: false}
])

In the return statement, map over the iconData objects:

iconData.map(icon => (
<TableCell key={icon.id}>
    <IconButton onClick={() => iconFavChange(icon.id)}>
      {icon.isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  
           <FavoriteBorderOutlinedIcon color="action"/> }
     </IconButton>
</TableCell>
))

Function to handle icon change:

const iconFavChange =(id)=> {
 let updatedIconData = iconData.map(icon => icon.id === id ? icon.isFavorite = !icon.isFavorite : icon)
// Map over existing state data and toggle the isFavorite property if the id matches
 setIconData(updatedIconData)
}

Edit:

The row data was stored outside the component, so I added a slice of state using React.useState(rows) to set row as the initial state.

const [data, setData] = React.useState(rows);

An isFavorite property was added to your row data.

isFavorite: boolean;

A favorite handler function was included to toggle the isFavorite property by looping over the data based on the name passed as an argument.

const handleFavoriteToggle = name => {
    console.log(name);
    let updatedData = data.map(row => {
      if (row.name === name) {
        row.isFavorite = !row.isFavorite;
      }
      return row;
    });
    setData(updatedData);
};

The icon component was updated accordingly.

<IconButton onClick={() => handleFavoriteToggle(row.name)}>
    {row.isFavorite ? (<FavoriteOutlinedIcon color="secondary" />)
                    : (<FavoriteBorderOutlinedIcon color="action" />)}
</IconButton>

The parameter was changed from 'row' to our data slice of state.

<TableBody>
            {stableSort(data, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {

Prevent the Icon in Material UI from simultaneously changing

Answer №1

Similar questions

The token endpoint in Nuxtjs auth module's configuration for auth strategies is not being triggered

What is the process for verifying a checkbox after it has been selected?

Mistake in the hovering positioning within the WordPress theme

What is the best way to utilize the node.js module passport-google?

Exploring Next.js: A Guide to Implementing Browsing History in Your Application

Displaying a list within a circle that elegantly animates, and then, after two full rotations, magically morphs

Getting a jQuery alert on iOS devices: A step-by-step guide

Ensure that the display is set to block to stack the input elements on top of each other

confirmation box for deleting a row in a grid view

Responding to a tweet with the help of twit and Node.js

Tips on incorporating a changing variable into a JavaScript Shader

Unchecked checkbox displays as checked in UI

How to Implement Loading Image with CSS

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

The function in jQuery that can be used to hide a <div> when clicked

Persist user input even after reloading the page

Retrieving information from the backend using JavaScript

Why isn't my heading showing up as expected in my document?

Using Angular to handle routes with a specific domain prefix

Position the final list item in the column on the left side