CODEWITHSUNDEEP
node.jsreactjstypescript
Michael
Michael

Reputation: 8729

Typescript Property '' does not exist on type 'never'. in React NodeJs stack

I am slowly teaching myself NodeJs, Express, React, monogoDB and Typescript.. (coming from a MVC C# SQL DB Background)

My very simple Hello world program just needs to communicate with the Express server to display a list of Users. My Express server is on Port 3001 and my Create-React-App Front end is on Port 3000.

my App Component is as follows:

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

class App extends React.Component {
  state = {users: []}
  componentDidMount(){
    console.log("Fetching Users");
    fetch('/users')
      .then(res=> res.json())
      .then(users=> this.setState({users}));
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React test</h2>
          {this.state.users.map(user => 
            <div key={user.id}>{user.username}</div>
          )}
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

The error:

(21,28): error TS2339: Property 'id' does not exist on type 'never'.

I can see the problem is that I havent defined users to include properties users.id and users.username.. But I am unsure how to do this?

Upvotes: 4

Views: 2583

Answers (1)

Michael
Michael

Reputation: 8729

I may have posted this question a bit to quickly. but I solved my answer

import * as React from 'react';
import './App.css';

const logo = require('./logo.svg');

interface Iuser {
  id: number,
  username: string
}

class App extends React.Component {
  state = {users: Array<Iuser>()}
  componentDidMount(){
    console.log("Fetching Users");
    fetch('/users')
      .then(res=> res.json())
      .then(users=> this.setState({users}));
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React test</h2>
          {this.state.users.map(user => 
            <div key={user.id}>{user.username}</div>
          )}
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

(Creating an interface for the array object)

I did try this previously but had the syntax wrong.

Upvotes: 6

Related Questions