React: removing / adding classes from a div onClick w/ multiple buttons / classes - css

Question

Question
I am trying to convert some of my jQuery projects over to use ReactJS. I would like to add/remove individual classes for background color, border, shape, size, etc. I want to be able to use many options (like 20 colors). If I add a background color, I want to remove the current background color without removing the current border, shape, or size classes. Is there a way to do this?
Research
I have read many posts on altering the buttons on hover, on toggling a class on/off, and changing out one class for another, but these have not pointed me in the right direction.
Image
More Details
If I click the bg_blue button, I would like the background to change without loosing the red border.
If I click the border_gray button, I would like it to change without loosing the current background color.
Start Code
import React from 'react';
var classNames = require( 'classnames' );
export class Body extends React.Component {
render() {
const red = {
backgroundColor: "red"
};
const gray = {
backgroundColor: "gray"
};
const blue = {
backgroundColor: "blue"
};
const border_red = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
const border_gray = {
borderWidth: 3,
borderColor: "gray",
borderStyle: "solid"
};
const border_blue = {
borderWidth: 3,
borderColor: "blue",
borderStyle: "solid"
};
return (
<div className="App-body">
<div className="start-shape" style= {border_red} ></div>
<button className="button" onClick="">bg_Red</button>
<button className="button">bg_Gray</button>
<button className="button">bg_Blue</button>
<button className="button">border_Red</button>
<button className="button">border_Gray</button>
<button className="button">border_Blue</button>
</div>
);
}
}

Answer 1

Here you go :
//intial style
state = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
// then just update/overwrite with new one
setStyle(new_style) {
this.setState(state => ({ ...state, ...new_style }));
}
// by click and passing the values
onClick={() => this.setStyle(gray)}
Here you check the code by running the code snippet :
class App extends React.Component {
state = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
setStyle(new_style) {
this.setState(state => ({ ...state, ...new_style }));
}
render() {
const red = {
backgroundColor: "red"
};
const gray = {
backgroundColor: "gray"
};
const blue = {
backgroundColor: "blue"
};
const border_red = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
const border_gray = {
borderWidth: 3,
borderColor: "gray",
borderStyle: "solid"
};
const border_blue = {
borderWidth: 3,
borderColor: "blue",
borderStyle: "solid"
};
return (
<div className="App-body">
<div className="start-shape" style={this.state} />
<button className="button" onClick={() => this.setStyle(red)}>
bg_Red
</button>
<button className="button" onClick={() => this.setStyle(gray)}>
bg_Gray
</button>
<button className="button" onClick={() => this.setStyle(blue)}>
bg_Blue
</button>
<button className="button" onClick={() => this.setStyle(border_red)}>
border_Red
</button>
<button className="button" onClick={() => this.setStyle(border_gray)}>
border_Gray
</button>
<button className="button" onClick={() => this.setStyle(border_blue)}>
border_Blue
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react-root'));
.start-shape {
padding : 50px;
width: 50px;
}
.button {
display: inline-block;
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

so you need to understand that onClick event should change the state of the component.
to add state add a constructor with initialState to class:
constructor(props){
super(props);
this.state = {
style: {}
}
}
then you need to add a function which will handle click event which will set the next state:
handleOnClick = (style) => {
// style = { <css properties>}
this.setState({style})
}
now that your click handler and state is in place, you just need to call the handler on click event with the next state you want.
<button className="button" onClick={()=>handleOnClick(bg_Red)}>bg_Red</button>
lastly, bind that latest state with the div as:
<div className="start-shape" style={this.state.style} ></div>