Full stateful implementation

BlogPost.js

import React, { Component } from "react";
import DataSource from "../DataSource";

const TextBlock = ({ text }) => <>{text}</>;

export class BlogPost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState({
      data: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.props.data} />;
  }
}