Change Material UI IconButton Icon on click

user_13060047 0
Viewed 903

I have an IconButton inside a DataGrid component. How can I pass on a state so onClick event changes the icon inside it?

    <IconButton size="small" onClick={e => {
changeStateOfIcon();
otherFunction();
}} style={{transform: "rotate(35deg)"}}>
    {this.someState == 'icon1'
    ?
    <Icon1/>
    :
    <Icon2/>
    }
    </IconButton>
material-ui reactjs
1 Answers

for only 2 possible values for your icons you can use a Boolean state

const [active,setActive]=useState(false)
<IconButton size="small" onClick={e => {
setActive(!active)
otherFunction();
}} style={{transform: "rotate(35deg)"}}>
    {active ?<Icon1/> : <Icon2/>}
</IconButton>
user_139993860
Related