React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'

Question

I am practicing typescript. For the backend, I used node express typescript and for the frontend, I used react typeScript. I fetched the data from the backend and try to render it on my browser. I am getting an error: property 'name' does not exist on type 'never'. TS2339. I think this error is coming from typescript. This is the error visualization

This is my backend setup

import express = require("express");
import cors = require("cors");
const app = express();
app.use(cors());
const port = 8080;
app.get("/", (req, res) =>
  res.send([
    {
      name: "John",
      age: 36
    },
    {
      name: "alex",
      age: 27
    }
  ])
);

app.listen(port, () => console.log(`server running port ${port}`));

This is is my React component

    import React, { useEffect, useState } from "react";

interface StateProperties {
  name: string;
  age: number;
}

//StateProperties | (() => StateProperties)
function App() {
  const [state, setState] = useState<StateProperties>([]);

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const response = await fetch("http://localhost:8080/");
    const data = await response.json();
    console.log(data);
    setState(data);
  };

  return (
    <div className="App">
      {state.length}

      {state.map((list, index) => {
        return <li key={index}>{list.name}</li>;
      })}
    </div>
  );
}

export default App;

wentjun · Accepted Answer · 2020-04-18T08:14:45.620

35

You need to provide the interfaces/type aliases so that TypeScript will know the typings of state.

After creating the interface for state, you will need to provide the interface as the generics for useState.

To solve the 2nd issue, you will need to provide the key props to each item of the <li> element

interface StateProperties {
  name: string;
  age: number;
}

function App() {
  const [state, setState] = useState<StateProperties[]>([]);

  // do the rest

return (
  <div className="App">
    {state.map(({ name, age }) => {
      return <li key={`${name}-${age}`}>{name}</li>; //FROM HERE ERROR IS COMING
    })}
  </div>
  );

}

edited Apr 18 '20 at 08:14

answered Apr 18 '20 at 07:28

wentjun

40,384
10
95
107

Did you destructure the data? – juha Apr 18 '20 at 08:14
You need to type `state` as `StateProperties[]`, as TypeScript needs to know the typings. If not, it will not know that `name` and `age` are valid properties – wentjun Apr 18 '20 at 08:15
The other issue was more of a react related issue, whereby you have to provide each element in a list a unique `key`. For this instance, we generate the key by joining the name and age. – wentjun Apr 18 '20 at 08:15
Also another question, when I will fetch the data from open API, do I have to use those prop types? – juha Apr 18 '20 at 08:19
For TypeScript, there is no need to use React `PropTypes`. You just need interface/type aliases. If you are fetching data from API, the property that is storing the responses should be typed. – wentjun Apr 18 '20 at 08:58

React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'

1 Answers1