Export a variable created inside a then() method within a fetch() function for a React Component

Question

I need to start from the very beginning to summarize my problem:

I'm creating a structure with a react framework to build a simple reactive page. I guess I can define it as a single page application:

Here's the structure:

Right now my article-content.js file has the following code:

import $ from "jquery";
const rootURL = 'mytargetwebsite';

const config = {
    rootURL: rootURL,
    taskRoute: `${rootURL}/wp-json/wp/v2/posts`,
};


let articles = '';
let the_request = $.ajax({
    type: 'GET',
    url: config.taskRoute,
    async: false,
});

the_request.done(function(data){

    articles = data.map(data => (

    {
        name: data.title.rendered,
        title: data.link,
        excerpt: data.excerpt.rendered,
        content: data.content.rendered
    }

    ));

});
export default articles;

And it works fine but ideally, this is not how I want to run my app, because my goal is to use a promise or the fetch API to export the variable and reuse it in another file, which is the following:

ArticlesList.js:

import React from 'react';
import { Link } from 'react-router-dom';

const ArticlesList = ({ articles }) => (
    <>
    {articles.map((article, key) => (
        <Link className="article-list-item" key={key} to={`/article/${article.name}`}>
            <h3>{article.title}</h3>
            <h3>{article.name}</h3>
            {/*<div>{article.content}</div>*/}
            <div
            dangerouslySetInnerHTML={{
                __html: article.content
            }}></div>
        </Link>
    ))}
    </>
);

export default ArticlesList;

So, I tried to use the fetch API several times, but I'm not able to export it because, when I try to run the .map function on the ArticlesList.js page an error will be thrown.

Something like:

const ciao = async () => { 
    function fetchDemo() {
        return fetch(config.taskRoute).then(function(response) {
            return response.json();
        }).then(function(json) {
            let articles = json.map(data => (
            {
                name: data.title.rendered,
                title: data.link,
                content: data.content.rendered
            }
            ));
            return articles;

        });
    }
}
const articles = ciao();
console.log(articles);

will never work for some reason but, on the other hand, the idea will work, so the articles will log a promise that it is resolved and contains the data that I need to map or loop through that I need on the other page.

The approach with the promise is very similar and, like in the other case, will work:

const articles = new Promise((resolve,reject) => {
    fetch(config.taskRoute, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json', },
    })
    .then(response => response.json())
    .then(data => {
        resolve(data.map(data => ({
            name: data.title.rendered,
            title: data.link,
            content: data.content.rendered
        })));
    })
    .catch((error) => {
        reject(error)
    });
});

export default articles;

But still, I won't be able to export my variable because it will fail in the other file (ArticlesList.js).

I tried several other approaches but they all fail so far.

Any hint?

UPDATE:

There must be something that I can't know because in theory, my code works fine:

ArticlesList.js

import React from 'react';
import { Link } from 'react-router-dom';
import articles from "../pages/article-content";

articles.then(articles => {
    console.log(articles);
    return;

});

If I console.log articles, it contains the value that I need to map but as soon as I try to map them:

console.log(articles);//works!
const ArticlesList = ({ articles }) => (
    <>
    {articles.map((article, key) => (
        <Link className="article-list-item" key={key} to={`/article/${article.name}`}>
            <h3>{article.title}</h3>
            <h3>{article.name}</h3>
            {/*<div>{article.content}</div>*/}
            <div
            dangerouslySetInnerHTML={{
                __html: article.content
            }}></div>
        </Link>
    ))}
    </>
);//doesn't work

I will get a:

TypeError: articles.map is not a function

Answer 1

Rather than trying to export articles (which is not possible for many reasons) why not simply export a promise which resolves with articles?

const rootURL = 'mywebsite';

const config = {
    rootURL: rootURL,
    taskRoute: `${rootURL}/wp-json/wp/v2/posts`,
}

const articles = new Promise((resolve,reject) => {
    fetch(config.taskRoute, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json', },
    })
    .then(response => response.json())
    .then(data => {
        resolve(data.map(data => ({
            name: data.title.rendered,
            title: data.link,
            content: data.content.rendered
        })));
    })
    .catch((error) => {
        reject(error)
    });
});

export default articles;

In the importing file

import articles from "./articles";

articles.then(articlesArray => {
    // Here articlesArray is an array and it must be used in this function
});

// Here aritclesArray is not defined

Note this approach works only if you need to load articles at boot time, if you need to load again articles later in your app, it's better to export a function which return a Promise rather than exporting the Promise itself.

Answer 2

Instead of exporting the articles you should export a function that fetches articles and then take care of all the async-await's or promises to resolve the function in the respective component that you use the function in

const rootURL = 'mywebsite.xyz/';

const config = {
    rootURL: rootURL,
    taskRoute: `${rootURL}/wp-json/wp/v2/posts`,
};

const getPeopleInSpace = () => 
    return fetch(config.taskRoute) 
       .then(res => res.json());

const getArticles = () => 
    getPeopleInSpace()
    .then(json => {
        const article = json.map(data => {
            return {
            name: data.title.rendered,
                title: data.link,
                content: data.content.rendered
            }
        });
        return article;
    })

export default getArticles ;

---

Now you can use the above function in any component like

import getArticles from 'path/to/getArticles';

class App extends React.Component {
   ...
   componentDidMount() {
       getArticles().then(articles => {
          console.log(articles);
          // set articles in state and use them
       }) 
   }
}

One reason why you shouldn't be exporting articles fetched from an API is because everytime you import the file, a new request goes, but you are never guranteed when the request is complete and your items are available to be used. By exporting the function you can handle the success and error scenarios