0

I have this:

interface State {
  backgroundColor: boolean;
  isLoading: boolean;
  errorOccured: boolean;
  acknowledgment: string;
}

export class GoodIntention extends React.Component<Props, State> {
    ...
    onClickOfAgreement = (policy: string) => () => {
        this.setState({backgroundColor: true});
        ...
    }
   
    render() {
        return(
            ...
            <table className={'checkbox-table ' + this.state.backgroundColor}>
                <label>
                    <input className="checkbox-round" type="checkbox" onClick={this.onClickOfAgreement(policy)}/>
                    &nbsp;&nbsp; Agree and access my certificate and disc
                </label>
          </table>
          ...
}

When I run my application the browser gives this error:

TypeError: Cannot read properties of null (reading 'backgroundColor')

on line <table className={'checkbox-table ' + this.state.backgroundColor}>.

I added the State interface to resolve a Property 'backgroundColor' does not exist on type 'Readonly<{}>' error based on this. I seem to be missing something though. CAn anybody advise what that is?

runnerpaul
  • 5,942
  • 8
  • 49
  • 118

1 Answers1

0

The setState is in the onClickOfAgreement function. backgroundColor doesn't exist until the first time the user clicks.

Niek Bruins
  • 21
  • 2
  • OK, makes sense. How do I resolve it though? Move the setState to some other location? – runnerpaul Feb 04 '22 at 17:47
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 05 '22 at 01:11
  • See, https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class – Niek Bruins Feb 05 '22 at 07:14