14

I'm trying to learn ReactJS following this tutorial: Tutorial

I'm new to the programming language so i'm clueless as to what to do now.

When I try to add the "Fetchemployee.tsx" file, I get an error at the this.state method.

(TS) Property 'state' does not exist on type 'FetchPeriod'

This is the code:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';

interface FetchPeriodDataState {
    periodList: PeriodData[];
    loading: boolean;
}

export class FetchPeriod extends React.Component<RouteComponentProps<{}>, FetchPeriodDataState> {
    constructor(props) {
        super(props);
    this.state = { periodList: [], loading: true };


    fetch('api/Period/Index')
        .then(response => response.json() as Promise<PeriodData[]>)
        .then(data => {
            this.setState({ periodList: data, loading: false });
        });

    // This binding is necessary to make "this" work in the callback  
    this.handleDelete = this.handleDelete.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
}

And then later on I have the PeriodData class:

export class PeriodData {
PeriodId: number = 0;
Description: string = "";
PeriodOwner: string = "";
PeriodName: string = "";}

The this.state and this.setState methods are giving the errors in the title, and I can't seem to find a fix.

Dylan
  • 323
  • 2
  • 5
  • 17
  • 2
    Do you have the React types installed? `@types/react` – Tholle Jun 28 '18 at 20:40
  • 1
    Are you sure the state initialization line in the constructor is giving you the error? Post the exact line that is giving the error (and with the context) – XCS Jun 28 '18 at 20:41
  • I'm sorry but where can I check this? In Package.json? – Dylan Jun 28 '18 at 20:41
  • Yes, make sure you have `@types/react` listed in either `dependencies` or `devDependencies` in `package.json`. – Tholle Jun 28 '18 at 20:43
  • Hi Cristy, please see the following picture: [Link](https://imgur.com/a/sxhd1RS) – Dylan Jun 28 '18 at 20:43
  • Hi @Tholle, I don't have this installed. However when I use the following nuget command (found on the website): `npm i @types/react` I get this error in the package manager console: `npm WARN saveError ENOENT: no such file or directory, open 'C:\users\dyl\Source\Repos\CurriculumViewerApiReact\package.json'` – Dylan Jun 28 '18 at 20:49
  • It looks like you have no `package.json` in the root of your project, but I can't say for certain. – Tholle Jun 28 '18 at 20:53
  • @Tholle You can see my project structure here: [link](https://imgur.com/a/hY904TJ) , however i'm not sure that's the problem, because I just created this project an hour ago using visual studio. I haven't changed anything to the structure of it. But now I've tried moving the package.json to the root of my project, and I still get this error: `npm WARN rollback Rolling back @types/react@16.4.4 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\dyl\Source\Repos\CurriculumViewerApiRea ct\node_modules\@types\react'` – Dylan Jun 28 '18 at 20:58
  • @Dylan Had a look on the error link you have provided. Can you please run the code? It may be IDE error only. – Hriday Modi Jun 28 '18 at 21:05
  • @HridayModi Running it seems to be okay, or at least I think so, it doesn't show me anything on the screen yet but the console is responding okay I think, could you confirm this? [link](https://imgur.com/a/vlIFTSu) Browser, [link](https://imgur.com/a/wM35uFe) Console – Dylan Jun 28 '18 at 21:15
  • @Dylan If there is no error in browser and console then error is just for IDE. There may be some settings which causes it in IDE – Hriday Modi Jun 28 '18 at 21:33

1 Answers1

26

One of possible causes of the problem is missing the React type definitions Therefore you can try to install them:

npm install --save-dev @types/react @types/react-dom

Without the types installed, TS can't properly infer the props needed for JSX elements.

Roman
  • 19,236
  • 15
  • 93
  • 97