I have been using Dev.to public API in my portfolio, https://mursalfk.com for almost 3 years, and it always used to show all of my articles on my portfolio. Recently I switched my entire portfolio to ReactJS and SaSS from native HTML, CSS and JS. And now, it only shows me my last 30 articles.

I am using the API as under

useEffect(() => {
        async function fetchArticles() {
            const response = await fetch(
                'https://dev.to/api/articles?username=mursalfk'
            );
            const data = await response.json();
            data?.map((article) => {
                const needed_data = {
                    title: article.title,
                    description: article.description,
                    url: article.url,
                    image: article.social_image,
                    date: article.published_at,
                    tags: article.tag_list,
                }
                setWriteUps(prevState => [...prevState, needed_data])
            })
        }
        fetchArticles();
    }, [])

Can anyone help me out with this one, please?

CodePudding user response：

I did a demo at this link: https://codesandbox.io/s/elegant-pascal-oc6h0b?file=/src/App.js

In your API you just received 30 objects. I've checked your portfolio link you also are receiving 30 objects. If you are expecting more than that, this problem is related to API

Attention that in your code you do not have the needed_data variable but probably this will receive the map I guess

Code:

import { useEffect, useState } from "react";
import "./styles.css";

async function fetchArticles() {
  const response = await fetch("https://dev.to/api/articles?username=mursalfk");
  const data = await response.json();
  console.log(data);
  return data?.map((article) => {
    return {
      title: article.title,
      description: article.description,
      url: article.url,
      image: article.social_image,
      date: article.published_at,
      tags: article.tag_list
    };
  });
}

export default function App() {
  const [writeUps, setWriteUps] = useState([]);

  useEffect(() => {
      (async function () {
        const articlesRespose = await fetchArticles();
        setWriteUps(articlesRespose);
      })();
  }, []);

  const WriteUps = writeUps.map((writeUp, index) => {
    return (
      <div key={writeUp.id}>
        <div>idnex array: {index}</div>
        <h3>{writeUp.title}</h3>
        <p>{writeUp.description}</p>
        <img
          alt={writeUp.title}
          style={{ width: "200px" }}
          src={writeUp.image}
        />
        <hr />
      </div>
    );
  });

  return <div className="App">{WriteUps}</div>;
}