0

I'm working on a SPFX issue using react and I keep getting error :- Error - typescript - src\webparts\reactReadWebpart\components\ReactReadWebpart.tsx(101,25): error TS2339: Property 'items' does not exist on type 'Readonly<{}>'. See below screenshots

export 
default class
ReactReadWebpart
extends 
React.Component<IReactReadWebpartProps, {}> {

  public
constructor(props:
IReactReadWebpartProps,
state:
IReactReadWebpartState){ 

    super(props); 

    this.state
= {  

      items: [ 

        { 

         
"EmployeeName":
"", 

         
"EmployeeId":
"", 

         
"Experience":"", 

         
"Location":""

        } 

      ]  

    };  

  } 

error at state.items below

{this.state.items.map(function(item,key){ 

              

              
return (<div
className={styles.rowStyle}
key={key}> 

                  
<div
className={styles.CellStyle}>{item.EmployeeName}</div> 

                  
<div
className={styles.CellStyle}>{item.EmployeeId}</div> 

<div
className={styles.CellStyle}>{item.Experience}</div>

<div
className={styles.CellStyle}>{item.Location}</div>

        

                
</div>); 

             })} 

Thanks in advance

naijacoder
  • 464
  • 5
  • 14
  • 31

1 Answers1

1

Setting the first-class code formatting in your question aside, you are getting the error because the component's state is described like as an empty object in this line

React.Component<IReactReadWebpartProps, {}>

So you probably should define it so typescript will know what to expect. Some type or interfaces that will include items field will do.

Daniel Khoroshko
  • 2,623
  • 15
  • 26
  • Thanks Daniel but I already have this interface export interface IReactReadWebpartState{ items:[ { "EmployeeName": "", "EmployeeId": "", "Experience":"", "Location":"" }] } Still very new to this if you can help – naijacoder Jan 16 '18 at 05:52
  • Hi! Very good! Your interface is not totally correct, it should be like `interface Item { EmployeeName: string; EmployeeId: string } interface IReactReadWebpartState { items: Item[]; } ` . Then you have to mention it as a second generic type argument of your class `React.Component `. Also it is generally recommended not to put I in front on interfaces in typescript because it doesn't really add any extra meaning to them! Good luck! – Daniel Khoroshko Jan 16 '18 at 11:58
  • Thanks Daniel . Will give it a shot – naijacoder Jan 18 '18 at 06:33