Change table background color when checkbox is ticked

Question

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)}/>
                &nbsp;&nbsp; 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

Changing className based on state could be an option using [classnames](https://www.npmjs.com/package/classnames) — ldruskis, Feb 04 '22 at 14:16
Does this answer your question? [How to dynamically add a class to manual class names?](https://stackoverflow.com/questions/36209432/how-to-dynamically-add-a-class-to-manual-class-names) — skobaljic, Feb 04 '22 at 14:18

André · Answer 1 · 2022-02-05T16:38:17.880

1

<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;
}

edited Feb 05 '22 at 16:38

answered Feb 04 '22 at 14:29

André

1,602
2
12
26

Thanks. I'm getting `Property 'backgroundColor' does not exist on type 'Readonly<{}>`. I assume I need to initialize it in some way. – runnerpaul Feb 04 '22 at 15:13
Of course, you need to initialize a state called backgroundColor. If you have a class component would be something like this in your constructor: ` state = { backgroundColor: } ` Apoligies, because you didn't posted you whole code in the question I was also rather short in my aswer. – André Feb 05 '22 at 16:33

Change table background color when checkbox is ticked

1 Answers1