Порядок действий в React.js с fetch

Написал следующий код по примерам с fetch:

import React, { Component} from 'react';
import { Container, Col, Row } from 'reactstrap';
import './Blog.css';

export class Blog extends Component {
    render() {
        return (
            <Container>
                <PostMaker id={4} />
                <PostMaker id={5} />
                <PostMaker id={9} />
            </Container>
        );
    }
}
export class PostMaker extends Component {
    constructor(props) {
        super(props);
        this.state = { id: 0, data: [] };
    }
    componentDidMount() {        
        const url = 'api/article/makenewpost/?id=' + this.props.id;
        fetch(url, {
            method: "GET",
            headers: {
                "Content-Type":"application/json"
            },
        }).then((response) => { this.setState({id: this.props.id, data:response})})       
    }    

    render() {             
        return (<Container>
            <Row>
                <Col xs={12} className="title">
                    <h2>{this.state.data[0].title}</h2>
                </Col>
            </Row>
            <Row>
                <Col xs={12} className="body">
                    <p>{this.state.data[0].body}</p>
                </Col>
            </Row>
        </Container>);
    }
}

Вылезает исключение:

TypeError: Cannot read property 'title' of undefined

Почему так происходит? render происходит перед fetch? Как мне правильно переделать код?

Если нужен метод из контроллера:

public IActionResult MakeNewPost(int id)
{
    var articles = _context.Post.Where(p => p.Id == id).Select(p => p);
    var title = articles.Select(p => p.Title).First();
    var body = articles.Select(p => p.Body).First();
    List<Post> posts = new List<Post>{
           new Post
            {
                Title = title,
                Body = body,
            }};

    return Json(posts.ToArray());
}