Mapping over an array in React typescript

Question

I have a static data structure that I'm serving from my Next project's API route which is an array of objects with the following interface:

export interface Case {
  id: string;
  title: string;
  beteiligte: string[];
  gerichtstermin?: string;
  tasks?: [];
}

I'm using React Query to pull in the data in a component:

const Cases:React.FC = () => {
  const { data, status } = useQuery("cases", fetchCases);

  async function fetchCases() {
    const res = await fetch("/api/dummy-data");
    return res.json();
  }

  return (
    <DefaultLayout>
      <Loading loading={status === "loading"} />
      {data.cases.map((case)=><p>{case.name}</p>)}
    </DefaultLayout>
  );
}

export default Cases;

But when trying to map over the data I keep getting these squiggly lines and an incredibly ambiguous error:

I've tried absolutely everything I can think of and have searched far and wide through React Query documentation, typescript guides and of course many, many stackoverflow posts. Please help! (typescript newbie)

UPDATE:

When I type {data.cases.map(()=>console.log("hello")} there is no error at all. But as soon as I add a parameter to the anonymous function, the errors pop up: {data.cases.map((case)=>console.log("hello"))}

Try const { data: Case, status } = useQuery("cases", fetchCases); — sayinmehmet47
– sayinmehmet47, Commented Oct 2, 2022 at 13:02
Types can't be assigned in an object like that as far as I know since this is javascript syntax for assigning a value to an object key — Chris Haupt
– Chris Haupt, Commented Oct 2, 2022 at 13:20

Yilmaz · Accepted Answer · 2022-10-02 14:05:06Z

2

In the case interface, you do not have "name" property.

you should be mapping only if success is true. you have to guard your code. see what you get console.log(data). also, use key prop when mapping

{status === "success" && (
    // case is reserved word. use a different name
    {data.cases.map((caseItem) => (
      <p key={caseItem.id}>{caseItem.name}</p>
    ))}
)}

case is a reserved word. If you use any other word it works

edited Oct 2, 2022 at 14:05

answered Oct 2, 2022 at 13:16

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Haupt Over a year ago

These are all very good suggestions, thank you. These are however general code improvement and don't address the issue I'm having 🙏

Yilmaz Over a year ago

@ChrisHaupt case is a reserved word. that is why I guess

Nathan Over a year ago

Seconded, case is likely the issue.

Chris Haupt Over a year ago

This was the issue, thank you so so much. Of course it is! I wish I'd read this answer before I spent the last half an hour recreating my project on Codesandbox 😅 Thanks Yilmaz and everyone else!

Svetoslav Petkov · Accepted Answer · 2022-10-02 14:19:47Z

0

I tried to reproduce your issue in sandbox and I managed to make it "transpile"

Sandbox link

You have to add prop name of type string to the Case interface in order to use it

export interface Case {
  name: string;
  id: string;
  title: string;
  beteiligte: string[];
  gerichtstermin?: string;
  tasks?: [];
}

// in my example interface is named CaseResonse

I assume your API response looks like this

{ "data": { "cases": [] } }

You have to define the API response to be usable:

interface GetCaseResponseWrapper {
  cases: Array<Case>;
}

// in my example it is array of CaseResponse
interface GetCaseResponseWrapper {
  cases: Array<CaseResponse>;
}

You need to decorate your fetchCases to return GetCaseResponseWrapper

async function fetchCases() {
  const res = await fetch("/api/dummy-data");
  const jsonResult = await res.json();
  return jsonResult.data as GetCaseResponseWrapper;
}

the data from the useQuery may be undefined, so you should use ?.

      {data?.cases.map((c) => (
        <p>{c.name}</p>
      ))}

Sandbox link

answered Oct 2, 2022 at 14:19

Svetoslav Petkov

1,62310 silver badges15 bronze badges

1 Comment

Chris Haupt Over a year ago

Thank you so much for recreating this. After your proposed solution, I also created a sandbox to test, but your solution didn't work. It turns out it's just that the variable name case that I was using in the array.map is a reserved word in JS!

Collectives™ on Stack Overflow

Mapping over an array in React typescript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related