CODEWITHSUNDEEP
javascriptreactjsreact-hooksmaterial-uijsx
avihaiB
avihaiB

Reputation: 91

How to change the Icon when clicking on it in react

I`ve got 2 mui icons that I want to switch every click. I mad a component for them and one of the props(called btnClicked) determines the state, the component is rendered when clicking but the icon buttons does not change, the code is :

import React,{useState} from 'react';
import {IconButton } from '@material-ui/core';
import AddIcon from '@mui/icons-material/Add';
import UndoIcon from '@mui/icons-material/Undo';
import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined'
import BorderColorIcon from '@mui/icons-material/BorderColor'
const AddButton = ({onBtnClick,btnClicked,btnText,btnColor}) => {
    const create = () => {
        return (
            <div>
            <IconButton
            aria-label="add an alarm"
            onClick={onBtnClick}
            >
                <BorderColorIcon
                color="secondary"
                style={{cursor:'pointer'}}
                />
            </IconButton>
        </div>
        )
    }
    const undo = () => {
        return (
            <div>
            <IconButton
            aria-label="add an alarm"
            onClick={onBtnClick}
            >
                <UndoIcon
                color="secondary"
                style={{cursor:'pointer'}}
                />
            </IconButton>
        </div>
        )
    }
    console.log(btnColor)
    if ({btnClicked}) {
        return(
            <div>
                {
                    create()
                }
            </div>
        )
    }
    else
    {
        return(
            <div>
                {
                    undo()
                }
            </div>
        )
    }
}

export default AddButton

please help me :)

Upvotes: 0

Views: 2806

Answers (2)

Tom
Tom

Reputation: 1188

Your if statement contains unnecessary brackets. Instead of

if ({btnClicked}) {

you should have

if (btnClicked) {

If your component still doesn't update then you are not updating the props from the parent component. You need to make sure that onBtnClick triggers an update to the props

Upvotes: 2

Tom Foster
Tom Foster

Reputation: 462

First thing I've noticed is that you shouldn't need btnClicked inside of an object.

if (btnClicked) {
    return(
        <div>
            {
                create()
            }
        </div>
    )
}

Upvotes: 1

Related Questions