How to use fetch() in react front-end to get data from express back-end?

Question

I'm trying to make a full-stack web-app using react and express. It's going pretty well atm but here's my problem:

So I have express running in back-end. All paths are used by react router except for '/api'. At the '/api/blogposts' path my server.js send the results of a query I made to the mySQL server. (I've checked it and this part works. If I browse to /api/blogposts my browser shows a json with the contents of my blogposts table).

My problem is with getting it to show in my react front-end. I'm trying to use fetch() but it doesn't work. Here's my code for the component that is supposed to fetch the blogposts:

import React from 'react';
import './Blogposts.css';
import SingleBpost from '../SingleBpost/SingleBpost.js';

class Blogposts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            receivedPosts: {}
        };
    }
    generateBlogpost() {
        fetch("/api/blogposts")
            .then((data) => {
                console.log(data);
            })
            .then((results) => {
                this.state.receivedPosts = results;
            });
        return this.state.receivedPosts;
    }
    render() {
        return(
            <div id="Blogposts">
               {this.state.generateBlogpost()}
            </div>
        );
    }
}


export default Blogposts;

Just to clarify the {this.state.generateBlogpost()} in the render method is just to check if I can get the data for now. Once this works I will feed it into another component's props like this:

<SingleBpost title={this.state.generateBlogpost().title} date={this.state.generateBlogpost().date} author={this.state.generateBlogpost().author} body={this.state.generateBlogpost().body} />

Anyways: does anyone know why this doesn't work? I've tried a few things but I just can't get it to work. What am I doing wrong?

Thanks in advance for any help!

Answer 1

You need to set the state of the variable receivedPosts in the fetch function like this:

this.setState({receivedPosts: results});

Also, you can call the function generateBlogpost() at the load of the Component Blogposts by adding the following function:

componentDidMount() {
 this.generateBlogpost();
}

Answer 2

this one is useless

.then((results) => {
                this.state.receivedPosts = results;
            });
        return this.state.receivedPosts;
    }

//instead you should use setState({receivedPosts: data.data})