hckhanh

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

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

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));

  // Similar to componentDidMount and componentDidUpdate:

hckhanh

import PropTypes from 'prop-types';
import React, { Fragment, useState } from 'react';
import EditModeItem from './EditModeItem';
import './style.scss';
import ViewModeItem from './ViewModeItem';

export default function EditableItem({ data }) {
  const [editMode, setEditMode] = useState(false);
  return (
    <Fragment>

hckhanh

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

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

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));
  
  return <TextBlock text={data} />;

hckhanh

import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import EditModeItem from './EditModeItem';
import './style.scss';
import ViewModeItem from './ViewModeItem';

export default class EditableItem extends Component {
  constructor(props) {
    super(props);
    this.state = { editMode: false };

hckhanh

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)

hckhanh

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

const Comment = ({ comment }) => <>{comment}</>;

class CommentList extends Component {
  render() {
    return (
      <>

hckhanh

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

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

class BlogPost extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {

hckhanh

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

export default function withSubscription(Component, selectData) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };

hckhanh

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

const Comment = ({ comment }) => <>{comment}</>;

export class CommentList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: DataSource.getComments()

hckhanh

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)