Sharepoint web part / react app error: Property 'show' does not exist on type 'Readonly<{}>'

It’s been a long while since I’ve done anything with React, not to mention I haven’t done much of it in sharepoint. I used the yeoman generator to create a simple react app and now I am having trouble trying to wire up state.

The following code generates this error: Property ‘show’ does not exist on type ‘Readonly<{}>’.

There are several other posts about what causes this but I haven’t been able to successfully fix it in my app. It seems as though the generator creates and references the props file. I saw one post that said that I need to create (and reference) a similar file for state? I tried still couldn’t get it to work. Any help would be GREATLY appreciated.

import * as React from 'react';
import styles from './SpetSelfServiceQuestionnaire.module.scss';
import { ISpetSelfServiceQuestionnaireProps } from './ISpetSelfServiceQuestionnaireProps';
import { escape } from '@microsoft/sp-lodash-subset';    

 export default class SpetSelfServiceQuestionnaire extends React.Component<ISpetSelfServiceQuestionnaireProps, {}> {

  constructor( props ) {
    super( props );
    this.state =  { show: true }
    this.toggleDiv = this.toggleDiv.bind(this)
  }

  toggleDiv = () => {
    const { show } = this.state;
    this.setState( { show: !show })
  }

>Solution :

React.Component<ISpetSelfServiceQuestionnaireProps, {}>

The second parameter to the generic is the type of the state. You’ve said that the state will be an empty object, so when you try to do something else, typescript points out the mismatch.

Looks like you want the state to be this:

interface ISpetSelfServiceQuestionnaireState {
  show: boolean;
}

export default class SpetSelfServiceQuestionnaire extends React.Component<
  ISpetSelfServiceQuestionnaireProps,
  ISpetSelfServiceQuestionnaireState
> {
  //...
}

It doesn’t need to be in another file, unless you want it to be.