Microsoft 365 – SPFx OR react app error: Property ” does not exist on type ‘Readonly<{}>‘ while accessing state property – {this.state.property}

Hi All,

Greetings for the day !!!

Today new REACT / SPFX component issue and solution 🙂

Prerequisites:

  • Make sure we have following packages are installed
    • @pnp/spfx-controls-react”
    • @fluentui/react”

npm install "@pnp/spfx-controls-react"

npm install "@fluentui/react"

Details / Background :

  • Recently I started working on SPFx component and using REACT framework
  • One of feature of my SPFx component is to get data which we are requesting from the user and store in list on SUBMIT button
  • So to get the data we are using fluent UI control and on respective events setting the state
  • Following are simple steps to demonstrate:
    • Using Fluent UI control – TextField – get the input from the user
    • On change event of TextField – set the state – say “frm_txtprojectname
    • On Submit button click read the value from state variable

Respective code as follows:

#importing respective controls
import {PrimaryButton, TextField } from '@fluentui/react';


export default class KnowledgeJunction extends React.Component<IKnowledgeJunctionProps, {}> {

     //Initializing state
    this.state = {
       txt_projectname=""
    }


    #render method :
public render(): React.ReactElement<IAddprojectProps> {

 return(
   <Label>Enter text:</Label>
          <TextField onChange={this.onchange.bind(this)} name="txt_projectname" value={this.state.txt_projectname}/>

<PrimaryButton text="Submit" onClick={() => this.submit()} />

 );

}//render


//textfield on change event
/**
   * 
   * @param value Change event for all text controls 
   * @param stateValue 
   */
  public onchange(e) {
    //alert("change event called => " + e.target.value) ;
    let change = {};  
        change[e.target.name] = e.target.value;  
        this.setState(change);
 }//onchange


public async submit() {

 //getting value from text field
 var projectname = this.state.txt_projectname; #Here getting an error - Property 'txt_projectname' does not exist on type 'Readonly<{}>

}//submit

}#class

Issue / Cause of an error :

Property ” does not exist on type ‘Readonly<{}>

This error caused because the second parameter to the class “KnowledgeJunction ” is the type of “state” and we are passing empty object as

export default class KnowledgeJunction extends React.Component<IKnowledgeJunctionProps, {}> 

Solution :

  • We need to provide the “state” instance in second parameter
  • If state interface is not defined, then create the state interface for state variables as

#state interface
export interface IKnowledgeJunctionState {
  
  txt_projectname:string;
}

  • Pass the above created “state” instance to class parameter
  • So now our class looks like as

export default class KnowledgeJunction extends React.Component<IKnowledgeJunctionProps, IKnowledgeJunctionState >

  • This will resolve the issue 🙂

Thanks for reading !!! Please feel free to discuss any point / share your thoughts / questions if any !!!

HAVE A GREAT TIME AHEAD 🙂

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: