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 :)
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
First thing I've noticed is that you shouldn't need btnClicked inside of an object.
if (btnClicked) {
return(
<div>
{
create()
}
</div>
)
}