React/Typescript Property 'ID' does not exist on type 'never'.ts(2339)

Question

I have this React/Typescript page:

PlayersPage.tsx

import React, { useState, useEffect } from 'react';
import { Page } from './Page';
import { PageTitle } from './PageTitle';
import { Button, Card } from 'react-bootstrap';

function PlayersPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [playersData, setPlayersData] = useState([]);

  //Fetch all players from database
  useEffect(() => {
    //setIsLoading(true);
    fetch('http://localhost:44326/api/Players')
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
      })
      .then((data) => setPlayersData(data));
    //.then(setIsLoading(false));
  }, []);

  return (
    <Page>
      <div style={{ padding: 20 }}>
        <PageTitle>Toons</PageTitle>
      </div>

      <div>
        {playersData.map((data) => (
          <div key={data.ID}>
            <Card>
              <Card.Title>{data.ID}</Card.Title>
              <Card.Text>{data.Handle}</Card.Text>
              <Card.Body>
                <div className="lables">
                  <Card.Text>Role</Card.Text>
                </div>
                <div className="lables">
                  <Card.Text>{data.Role}</Card.Text>
                </div>
                <Button variant="primary">Work</Button>
              </Card.Body>
            </Card>
            <br></br>
          </div>
        ))}
      </div>
    </Page>
  );
}

export default PlayersPage;

I am getting this error: Property 'ID' does not exist on type 'never'.ts(2339) on every line that has data.ID or data.whatever .

Why would those values never be used or are always null? I use nearly identical code in a couple other apps so I'm not sure what is different about this situation. Thanks in advance.

Answer 1

You need to add type for playersData when you decalre it.

interface DataType {
  ID: string;
  Handle: string;
  Role: string;
}

const [playersData, setPlayersData] = useState<Array<DataType>>([]);