React Typescript .map is not a function error on a typed array

Question

import React, { useState, useEffect } from "react"
import axios from 'axios'
import postImage from "assets/post_image.png"
import styled from "styled-components"

type TrendingPostsProps = {};
const TrendingPostsContainer = styled.div``;
const SinglePostContainer = styled.div``;

const TrendingPostImage = styled.img``;

const TrendingPostTitleContainer = styled.div``;

export const TrendingPosts: React.FC<TrendingPostsProps> = () => {
  interface News {
    news_id: number;
    title: string;
    datetime: string;
    summary: string;
    details: string;
    image: string;
    hit: number;
  }
  
  const [newsData, setNewsData] = useState<News[]>([]);

  useEffect(() => {

    
    const getNewsData = async () => {
      const response = await axios.get<News[]>("http://localhost:5000/news")
        setNewsData(response.data)
    }

    getNewsData()
  }, [])
  console.log(typeof newsData)
  console.log(newsData)
  return (
    <>
      <TrendingPostsContainer>
        <h2>Trending Posts</h2>
        {
        <ul>
          {newsData.map((item, index) => (
            <li key={index}>
              <SinglePostContainer>
                <TrendingPostImage src={postImage} alt=""></TrendingPostImage>
                <TrendingPostTitleContainer>
                  <h3>{item.title}</h3>
                  {/* <p>{item.date}</p> */}
                </TrendingPostTitleContainer>
              </SinglePostContainer>
            </li>
          ))}
        </ul>
        }
      </TrendingPostsContainer>
    </>
  );
};

Hi, I'm trying to fetch data from an existing backend with React Typescript. When I hover (VSCode) on the response.data in the useEffect function, it says that the data is in the type News[]. However, when I try to map it, it throws the error in the title, and if I print the newsData and its type as in the snippet, it prints this. So I thought that I should be able to iterate the data by newsData.data.map but when I do that, it says Property 'data' does not exist on type 'News[]'. I'm really confused here, the data should be an array, how can I iterate that?

Thanks in advance.

Viet · Accepted Answer · 2021-08-01 10:17:06Z

1

you declare newsData has type Array but you setNewsData with an object. You need to update params of setNewsData is an array.

const getNewsData = async () => {
  const response = await axios.get<{data: News[]>}("http://localhost:5000/news");
  setNewsData(response.data.data);
};

edited Aug 1, 2021 at 10:17

answered Aug 1, 2021 at 10:03

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

1 Comment

burakokumus Over a year ago

This gives the same error: Property 'data' does not exist on type 'News[]'. response.data is considered a News[], but ,map function cannot iterate it.

Iain McHugh · Accepted Answer · 2021-08-01 10:16:37Z

0

Try:

import type { AxiosResponse } from ‘axios’;

const response = await axios.get<AxiosResponse<News[]>>("http://localhost:5000/news") 
setNewsData(response.data)

edited Aug 1, 2021 at 10:16

answered Aug 1, 2021 at 10:07

Iain McHugh

988 bronze badges

Collectives™ on Stack Overflow

React Typescript .map is not a function error on a typed array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related