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...

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

%d bloggers like this: