React did not render new css style - css

Question

This is my code logic, When user click the box , I will set the state active to true
and getCssStyle() will return drag-and-resize-box-text clicked
and then the background image(T) should disappear
class Box extends Component {
constructor(props) {
super(props);
this.state = {
active: false,
}
}
// decide which style to be used
getCssStyle = (type) => {
switch (type) {
case 'text':
if (this.state.active) {
console.log("AAA")
return 'drag-and-resize-box-text clicked'
} else {
console.log("BBB")
return 'drag-and-resize-box-text';
}
// break;
default:
return '';
}
}
onClick = () => {
this.setState({active: true});
}
render() {
return (
<div className={this.getCssStyle(boxType)} >
{this.boxFillContent()}
</div>
</div>
);
}
}
The dev tools show the background image is delete, but the page is still show the image
What's wrong with this??
css
.drag-and-resize-box-text{
border: dashed 3px LightSeaGreen;
background: url(../images/bottom/text_normal.png) no-repeat;
background-position:center;
width: inherit;
height: inherit;
}
.drag-and-resize-box-text.clicked{
border: dashed 3px LightSeaGreen;
/*background: url(../images/bottom/text_normal.png) no-repeat;*/
background-position:center;
width: inherit;
height: inherit;
}

Answer 1

.drag-and-resize-box-text.clicked should have background: none.
Also your code could be made much simpler by using
<div className={this.state.active ? 'drag-and-resize-box-text clicked' : 'drag-and-resize-box-text'} >
{this.boxFillContent()}
</div>