CODEWITHSUNDEEP
reactjsmaterial-ui
VaibS
VaibS

Reputation: 1893

How to change icon in button in ReactJS?

I'm using material-ui Raised button and want to change the icon in the button when it is clciked.

<RaisedButton primary={true}><i className="fa fa-plus" aria-hidden="true"></i>EXPAND</RaisedButton>

The button looks like this now

Any suggestion.Thanks!

Upvotes: 0

Views: 1032

Answers (2)

nirsky
nirsky

Reputation: 3105

On your initial state set expanded=false and then: 

<RaisedButton primary={true} 
              onClick={() => this.setState({expanded: !this.state.expanded})}>
   <i className={'fa ' + (this.state.expanded ? 'fa-minus' : 'fa-plus')} aria-hidden="true"></i>
   EXPAND
</RaisedButton>

Upvotes: 3

Rohan Veer
Rohan Veer

Reputation: 1490

You can use ClassNames javascript library. - https://github.com/JedWatson/classnames

let classes = classNames({
              "fa" : true,
              "fa-minus": this.state.something,
            });

Upvotes: 0

Related Questions