Changing the MaterialUI icon when it is clicked

Question

Changing the MaterialUI icon when it is clicked

Each item in a list has an "AddIcon". Upon clicking the icon, I want to replace it with a "BlockIcon" based on its unique "id".

import React from 'react'
import {List, ListItem} from '@material-ui/core'
import AddCircleIcon from '@material-ui/icons/AddCircleOutline'
import BlockIcon from '@material-ui/icons/BlockOutlined'

const CustomComponent = () => {
    const handleIconClick = (id) => {
        // logic to switch <AddCircleIcon /> with <BlockIcon /> using the specified "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    <AddCircleIcon /> 
                </ListItem>
            </ListItem>
        </List>
    )
}

export default CustomComponent

Upon clicking the icon, the expected behavior is for the AddIcon to be replaced with a BlockIcon.

reactjs material-ui

Answer 1

Answer №1

It is recommended to create a state variable that will store the click status, allowing you to toggle between icons based on whether it has been clicked or not.

import React from 'react'
import {List, ListItem} from '@material-ui/core'
import AddCircleIcon from '@material-ui/icons/AddCircleOutline'
import BlockIcon from '@material-ui/icons/BlockOutlined'

const StackOverflow = () => {
    const [clicked, setClicked] = useState(false)
    const handleIconClick = (id) => {
         setClicked(true)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicked ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default StackOverflow

If you anticipate multiple items being clicked within a list, consider updating the structure as shown below:

const StackOverflow = () => {
    const [clicks, setClicks] = useState([])
     //add the id to the array of clicked items if it doesn't exist but if it does exist remove it. this makes sure that double clicking on an item brings it back to normal
    const handleIconClick = (id) => {
         let result =  clicks.includes(id)? clicks.filter(click => click != id): [...clicks, id]
         setClicks(result)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicks.includes(101) ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default StackOverflow

Keep in mind that when looping through items before displaying, ensure to pass the id dynamically rather than hardcoding the number in clicks.include(id) and handleIconClick(id).

Answer 2

It is recommended to create a state variable that will store the click status, allowing you to toggle between icons based on whether it has been clicked or not.

import React from 'react'
import {List, ListItem} from '@material-ui/core'
import AddCircleIcon from '@material-ui/icons/AddCircleOutline'
import BlockIcon from '@material-ui/icons/BlockOutlined'

const StackOverflow = () => {
    const [clicked, setClicked] = useState(false)
    const handleIconClick = (id) => {
         setClicked(true)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicked ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default StackOverflow

If you anticipate multiple items being clicked within a list, consider updating the structure as shown below:

const StackOverflow = () => {
    const [clicks, setClicks] = useState([])
     //add the id to the array of clicked items if it doesn't exist but if it does exist remove it. this makes sure that double clicking on an item brings it back to normal
    const handleIconClick = (id) => {
         let result =  clicks.includes(id)? clicks.filter(click => click != id): [...clicks, id]
         setClicks(result)
        // change <AddCircleIcon /> to <BlockIcon /> at "id"
    }
    return (
        <List component="nav">
            <ListItem>
                <ListItem button onClick={handleIconClick(101)}>
                    {clicks.includes(101) ? <BlockIcon /> : <AddCircleIcon /> }
                </ListItem>
            </ListItem>
        </List>
    )
}

export default StackOverflow

Keep in mind that when looping through items before displaying, ensure to pass the id dynamically rather than hardcoding the number in clicks.include(id) and handleIconClick(id).

Answer 3

Answer №2

Here is a functional example that includes a working demonstration (https://codesandbox.io/s/keen-kowalevski-cguvs?fontsize=14)

import React, { useState } from "react";
import ReactDOM from "react-dom";
import IconButton from "@material-ui/core/IconButton";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

function App() {
  const [clicked, setClicked] = useState();

  return (
    <IconButton onClick={() => setClicked(true)}>
      {clicked ? <BlockIcon /> : <AddCircleIcon />}
    </IconButton>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 4

Here is a functional example that includes a working demonstration (https://codesandbox.io/s/keen-kowalevski-cguvs?fontsize=14)

import React, { useState } from "react";
import ReactDOM from "react-dom";
import IconButton from "@material-ui/core/IconButton";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

function App() {
  const [clicked, setClicked] = useState();

  return (
    <IconButton onClick={() => setClicked(true)}>
      {clicked ? <BlockIcon /> : <AddCircleIcon />}
    </IconButton>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 5

Answer №3

In the example below, everything is working as expected when interacting with the button

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Add from "@material-ui/icons/Add";
import Remove from "@material-ui/icons/Remove";

import "./styles.css";

function App() {
  const [clicked, setClicked] = useState(true);

  return (
    <Button variant="contained" onClick={() => setClicked(!clicked)}>
      Column {clicked ? <Add color="primary"/> : <Remove color="secondary"/>}
    </Button>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 6

In the example below, everything is working as expected when interacting with the button

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Add from "@material-ui/icons/Add";
import Remove from "@material-ui/icons/Remove";

import "./styles.css";

function App() {
  const [clicked, setClicked] = useState(true);

  return (
    <Button variant="contained" onClick={() => setClicked(!clicked)}>
      Column {clicked ? <Add color="primary"/> : <Remove color="secondary"/>}
    </Button>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 7

Answer №4

Store the id of the selected icon in the state of the component and display the icon based on a condition:

import React, { useState } from "react";
import { List, ListItem } from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

const UniqueComponent = (props) => {
  const [selectedIconId, setSelectedIconId] = useState(100);

  const handleIconSelection = (iconId) => () => {
    setSelectedIconId(iconId);
  };

  return (
    <List component="nav">
      <ListItem>
        <ListItem button onClick={handleIconSelection(101)}>
          {selectedIconId === 100 ?  <AddCircleIcon /> : <BlockIcon />}
        </ListItem>
      </ListItem>
    </List>
  );
};

export default UniqueComponent;

Answer 8

Store the id of the selected icon in the state of the component and display the icon based on a condition:

import React, { useState } from "react";
import { List, ListItem } from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircleOutline";
import BlockIcon from "@material-ui/icons/BlockOutlined";

const UniqueComponent = (props) => {
  const [selectedIconId, setSelectedIconId] = useState(100);

  const handleIconSelection = (iconId) => () => {
    setSelectedIconId(iconId);
  };

  return (
    <List component="nav">
      <ListItem>
        <ListItem button onClick={handleIconSelection(101)}>
          {selectedIconId === 100 ?  <AddCircleIcon /> : <BlockIcon />}
        </ListItem>
      </ListItem>
    </List>
  );
};

export default UniqueComponent;

Answer 9

Answer №5

import "./App.css";
import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import React, { useState } from "react";

function App() {
const [heartColor, setHeartColor] = useState("");
const handleHeart = () => {
    const color = heartColor ? "" : "secondary";
    setHeartColor(color);
   };
return (
   <div className="App">
       <ThumbUpAltIcon onClick={handleHeart} color={heartColor}></ThumbUpAltIcon>
   </div>
       );
   }

export default App;

Answer 10

import "./App.css";
import ThumbUpAltIcon from "@material-ui/icons/ThumbUpAlt";
import React, { useState } from "react";

function App() {
const [heartColor, setHeartColor] = useState("");
const handleHeart = () => {
    const color = heartColor ? "" : "secondary";
    setHeartColor(color);
   };
return (
   <div className="App">
       <ThumbUpAltIcon onClick={handleHeart} color={heartColor}></ThumbUpAltIcon>
   </div>
       );
   }

export default App;

Changing the MaterialUI icon when it is clicked

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Importing filter function from Material UI to use in the AutoComplete component

Next.js Head component will not repeat the same Meta Tags

Passing an array of items as a property to a child component in React with Typescript is not possible

What is the reason behind FieldSelect returning a string instead of an object like FieldCheckbox?

Is there a way for me to display a customized error message using antd components?

Django/React CSRF validation error: Origin verification failed - the URL http://localhost:8000/ does not correspond to any authorized origins

What are some methods for singling out a specific table row?

How to troubleshoot problems with npm, yarn, or package.json

Steps for incorporating the <head> tag into a dynamically generated client component in Next.js

Troubleshooting a Component File Import Issue in ReactJS

Rotate icon in Material UI Auto Complete when expanding or collapsing

React Native throws an error when trying to convert a JSON value of type NSNULL, which is '<null>', to a valid URL

Switch the visibility of a div tag using Next.js

Experiencing difficulties establishing a connection between the React client and Node.js server using SocketIO

Implementing Material-UI Autocomplete: How to Include a Starting Value for the startAdornment

The regex routes are now unable to efficiently serve static assets

What is the trick to accessing an object's key and value when you are unsure of the object's

Setting up a middleware file for your nextJs project: A step-by-step guide

React JS's popup feature can be unreliable, as it tends to break the application frequently

Customize material-ui button designs using styled-components