Property '' does not exist on type 'never'. (useState on mapped JSON server data using Typescript)

Question

I am following a react tutorial on mui and decided to incorporate typescript

Notes.tsx

fetched JSON server data then set it to notes

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

const Notes = () => {
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8000/notes')
      .then((res) => res.json())
      .then((data) => setNotes(data));
  }, []);

Mapped the JSON Server dummy data here

  return (
    <div>
      {notes.map((note:string) => (
        <p key={note.id}>{note.title}</p>
      ))}
    </div>
  );
};

export default Notes;

db.json (JSON server dummy data)

{
  "notes": [
    {
      "title": "Yoshi's birthday bash",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
      "category": "reminders",
      "id": 1
    },
    {
      "title": "Complete my ninja training",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
      "category": "work",
      "id": 2
    },
    {
      "title": "Order a pizza!",
      "details": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
      "category": "todos",
      "id": 3
    }
  ]
}

This is the Error that occurs

You need to supply a _type_ for your state, `[]` is inferred as `never[]` (i.e. an array that's _always_ empty). — jonrsharpe, Jan 07 '22 at 09:03
See @jonrsharpe's comment. The way you tell TypeScript what type the elements in the array will be is to provide a *type argument* to `useState`: `const [notes, setNotes] = useState([]);` where `SomeTypeHere` is the type of the elements. — T.J. Crowder, Jan 07 '22 at 09:04

score 0 · Accepted Answer · answered Jan 07 '22 at 09:20

You need to type your notes object and tell your component local state to expect that as well as your map function, see below for some pointers.

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

type Note = {
 title: string,
 details: string,
 category: "reminders" | "work" | "todos",
 id: number,
}

const Notes = () => {
  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    fetch('http://localhost:8000/notes')
      .then((res) => res.json())
      .then((data: Note[]) => setNotes(data));
  }, []);

 return (
    <div>
      {notes.map((note: Note) => (
        <p key={note.id}>{note.title}</p>
      ))}
    </div>
  );
};

export default Notes;

this solution worked for me! Thanks! – Knuckles Jan 07 '22 at 19:06 — Knuckles, Jan 07 '22 at 19:06

Property '' does not exist on type 'never'. (useState on mapped JSON server data using Typescript)

1 Answers1