Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

Question

So I am learning React and very basic full stack web development and I keep hitting this promise when I am trying to get an array of objects in my Mongodb. Through Postman I know it is returning what I want [{},{},...]. But when I try to use it in my component to map the names I keep getting

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

On my web console my list is displaying as a Promise but with the array I want inside of it. I keep trying different setups with my promise, like many posts on here say, to get it to resolve but everything I've tried does not change this outcome.

const ArticlesListPage = async () => {

    let testResult = function()
    {
        return fetch('/api/articles-list').then(result => {return result});
    };


    let results = testResult();
    results.then(function(res){
        console.log(res.json());
    })

}

export default ArticlesListPage;

And the component:

const ArticlesList = ({articles}) => (

    <>
        {articles.map((article, key) => (
            <Link className="article-list-item" key={key} to={`/article/${article.name}`}>
                <h3>{article.title}</h3>
                <p>{article.content[0].substring(0,150)}...</p>
            </Link>
        ))}
    </>
);

export default ArticlesList;```

Answer 1

This is because you are returning a Promise and a React Component can only return JSX. Refer to this issue for detailed info:

Why does putting a div tag allow this React code to compile?

Here is the part thats wrong, the fetch returning:

return fetch('/api/articles-list').then(result => {return result});

The page (because is a React Component ) cannot return a fetch