how to fix the error (is not a function) in react

Question

hello I am learning react and currently I stumble on an error message: (TypeError: newsData.map is not a function) in my browser when I run my code. Vs code does not notify me of an error only my browser displays it (I use crome)

import React, { useEffect, useState } from "react";
import Navigation from "../components/Navigation";
import Logo from "../components/Logo";
import axios from "axios";
import Article from "../components/Article";

const News = () => {
  const [newsData, setNewsData] = useState([]);

  useEffect(() => {
    getNews();
  }, []);
  const getNews = () => {
    axios
      .get("http://localhost:3001/articles")
      .then((res) => setNewsData(res));
  };
  return (
    <div className="news-container">
      <Navigation />
      <Logo />
      <h1>News</h1>

      <form>
        <input type="text" placeholder="Nom" />
        <textarea placeholder="Message"></textarea>
        <input type="submit" value="Envoyer" />
      </form>
      <ul>
        {newsData.map((article) => (
          <Article />
        ))}
      </ul>
    </div>
  );
};

export default News;

Could you confirm what kind of value `newsData` holds may be include a small example. — phuzi, Jul 27 '21 at 12:56
Is your api responding with an array of data? Have you tried consoling it? newsData.map is not a function is shown when the response is not an array — RABI, Jul 27 '21 at 12:56
are you getting array type data in `res` when you make axios call? — Amruth, Jul 27 '21 at 12:56
`res` probably isn't an array. Use `console.debug(res)` to see what's in it — jd182, Jul 27 '21 at 12:57
Does this answer your question? [Axios GET request not working](https://stackoverflow.com/questions/47437176/axios-get-request-not-working) — Amruth, Jul 27 '21 at 13:24

Giovanni Esposito · Answer 1 · 2021-07-27T13:02:17.130

2

This means that newsData is not an array. Considering that you initialized it as an empty array (const [newsData, setNewsData] = useState([]);) I think that your problem is here:

setNewsData(res)

res is not an array.

To solve this you should set newsData as:

setNewsData(res.data)

edited Jul 27 '21 at 13:02

answered Jul 27 '21 at 12:58

Giovanni Esposito

10,696
1
14
30

@PhilippeTankoano Happy to ear that. Have a nice coding =) – Giovanni Esposito Jul 27 '21 at 13:02

how to fix the error (is not a function) in react

1 Answers1