Changing style of a button on click

You can try to use state to store the color. Maybe this would give you the idea how to solve the problem :

class Test extends React.Component {    constructor(){        super();        this.state = {           black: true        }    }    changeColor(){       this.setState({black: !this.state.black})    }    render(){        let btn_class = this.state.black ? "blackButton" : "whiteButton";        return (             <button className={btn_class} onClick={this.changeColor.bind(this)}>                  Button             </button>        )    }}React.render(<Test />, document.getElementById('container'));

Here is a fiddle.

You also have access to event and current target of the event

handleClick = (event) => {   // accessible   event.target.style   event.target.classList //to change style via css}

Here is another solution

changeStyles = () => {    let element = document.getElementById('button')    ReactDOM.findDOMNode(element).style.backgroundColor = this.state.isClicked?'black' : 'white'}

In this way you can change only needed style property preventing duplicates in CSS.