Changing style of a button on click - reactjs

Question

Is it possible to change background-color of my button onClick function?
ex. click background-color: black, another click background-color: white
I've tried something like this.style, no result.
I've managed to get overlay working and insert needed data inside of it.
But didn't managed to find any post that could help me.
I am using react-bootstrap.
This is my code.
const metaDataOverlay = (
<div>
<style type="text/css">{`
.btn-overlay {
background-color: white;
margin-right: -15px;
margin-left: -15px;
padding-bottom: -20px;
padding: 0;
}
`}</style>
<ButtonToolbar>
<ButtonGroup>
<OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={popoverHoverFocus}>
<Button bsStyle="overlay" onClick={ clicked } onKeyPress={ keypress }>
<div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
<a href={url} onClick={(e)=>{e.preventDefault(); console.log("123")}}>
<div>
<img data-qa="poster" className={bemBlocks.item("poster")} src={result._source.poster} width="240" height="240"/>
</div>
</a>
</div>
</Button>
</OverlayTrigger>
</ButtonGroup>
</ButtonToolbar>
</div>
)

Answer 1

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.

Answer 2

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
}

Answer 3

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.

Answer 4

This is how you can access
handleClick=(e)=>{
console.log("this is working fine");
e.preventDefault();
e.target.style.color = 'black'
console.log(e.target);
}
If you want more dynamically you can initialize state with some default value of style afterwords use setState function to update your state

Answer 5

Add this to your Tooltip
<Tooltip cursor={{ fill: 'transparent' }} />

Answer 6

Here is another solution :
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
BackgroundColor: "BLACK"};
};
render(){
return (
<div className='app'>
<button className={this.state.BackgroundColor === "BLACK" ? "Black" : "nothing"}
onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
<button className={this.state.BackgroundColor === "WHITE" ? "White" : "nothing"}
onClick={() => {this.setState({BackgroundColor: "BLACK"})}}>CHANGE TO WHITE</button>
</div>
);
}
}
export default App;
This code will help you to hide the ex black button and change with new button with white background. This function will also work for the new white button. If maybe you just want to change background-color of button without repeat situation you can also try to change conditional state in render
render(){
return (
<div className='app'>
<button className={this.state.BackgroundColor === "BLACK" ? "Black" : "White"}
onClick={() => {this.setState({BackgroundColor: "WHITE"})}}>CHANGE TO BLACK</button>
</div>
);
}
}
Here is the CSS :
*{
margin: 0;
padding: 0;
}
.app{
display: flex;
justify-content: center;
align-items: center;
}
.Black{
background-color: black;
color: white;
}
.White{
background-color: white;
color: black;
}
.nothing{
display: none;
}