TypeError: Cannot read properties of null when I add an interface to resolve Readonly property error

Question

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?

Answer 1

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