I have this render:
render() {
const {policy} = this.props;
return (
<div className="my-content">
<table className="checkbox-table">
<label>
<input className="checkbox-round" type="checkbox" onClick={this.onClickOfAgreement(pol)}/>
Agree and access
</label>
</table>
</div>
This is the CSS I'm using:
.my-content {
position: relative;
background-color: #fefefe;
padding: 0;
}
.checkbox-table {
margin: 10px;
border-radius: 7px;
width: auto;
padding: 10px;
}
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid grey;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: #4f9f31;
border-color: #fefefe;
border-width: 3px;
}
I'd like the entire table background to also turn #4f9f31 when the checkbox is ticked. How is this done?
I tried the solution in Property 'value' does not exist on type 'Readonly<{}>' but caused this error in my browser:
Property 'backgroundColor' does not exist on type 'Readonly<{}>'
I added a State interface to resolve the error but then got TypeError: Cannot read properties of null (reading 'backgroundColor'). I seem to be missing something though.
How to dynamically add a class to manual class names? but it give me
<table className={`checkbox-table ${this.state.addBackgroundColor}`}>
To make it work you you need to initialize a state called addBackgroundColor.
Then, your fuction onClickOfAgreement(pol) can set the state backgroundColor to 'checked'.
Then on CSS you make a rule that adds the background color when the state is checked:
.checked {
background-color: #4f9f31;
}