Simple Implementation of Form Inputs Using HOCs (React)

BlogPost.js

import React, { Component } from 'react';
//import TextBlock from './TextBlock';
import {BlogPostWithSubscription} from './withSubscription';

class BlogPost extends Component {
    
  render() {
    const {post, handlePostChange, handlePostSubmit} = this.props;
    return (
      <div className="MyApp">
        {/* <TextBlock posts={this.state.posts} /> */}
        <form onSubmit={handlePostSubmit}>
            <input type="text" value={post}  onChange={handlePostChange}/>
            <input type="submit" value="Submit" />
        </form>
        <pre>{JSON.stringify(this.props, null, 2)}</pre>
      </div>
    );
  }
}

export default BlogPostWithSubscription(BlogPost);

Comment.js

import React, { Component } from 'react';

export default class Comment extends Component {

  render() {
    return(
      <div>
        {this.props.comments.map((comment, i) =>
          <p key={i}>{comment}</p>
          )}
      </div>
    );
  }
}

CommentList.js

import React, { Component } from 'react';
//import Comment from './Comment';
import {CommentListWithSubscription} from './withSubscription';

class CommentList extends Component {
    
  render() {
    const {comment, handleCommentChange, handleCommentSubmit} = this.props;
    return (
      <div className="MyApp">
        {/* <Comment comments={this.state.comments} /> */}
        <form onSubmit={handleCommentSubmit}>
            <input type="text" value={comment}  onChange={handleCommentChange}/>
            <input type="submit" value="Submit" />
        </form>
        <pre>{JSON.stringify(this.props, null, 2)}</pre>
      </div>
    );
  }
}

export default CommentListWithSubscription(CommentList);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import BlogPost from './BlogPost';
import CommentList from './CommentList';
// import RootComponent from './RootComponent';
// import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<div><BlogPost />, <CommentList /></div>, document.getElementById('root'));
// ReactDOM.render(<RootComponent />, document.getElementById('root'));
// ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

TextBlock.js

import React, { Component } from 'react';

export default class TextBlock extends Component {

  render() {
    return(
      <div>
        {this.props.posts.map((post, i) =>
          <p key={i}>{post}</p>
          )}
      </div>
    );
  }
}

withSubscription.js

import React, { Component } from 'react';
import TextBlock from './TextBlock';
import Comment from './Comment';

export const BlogPostWithSubscription = (BlogPost) => {
    class NewBlogPostComponent extends Component {

        constructor(props) {
            super(props);
            this.state = { post: '', posts: [] };
            this.handlePostChange = this.handlePostChange.bind(this);
            this.handlePostSubmit = this.handlePostSubmit.bind(this);
        }
    
        handlePostChange(event) {
            this.setState({post: event.target.value});
        }
    
        handlePostSubmit(event) {
            event.preventDefault();
            this.setState({post: '', posts: [...this.state.posts, this.state.post]});
        }

        render() {
            return (
                <div>
                    <TextBlock posts={this.state.posts} />
                    <BlogPost post={this.state.post} handlePostChange={this.handlePostChange} handlePostSubmit={this.handlePostSubmit} />
                </div>

            )
        }
    }
    return NewBlogPostComponent;
};

export const CommentListWithSubscription = (CommentList) => {
    class NewCommentListComponent extends Component {

        constructor(props) {
            super(props);
            this.state = { comment: '', comments: [] };
            this.handleCommentChange = this.handleCommentChange.bind(this);
            this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
        }
    
        handleCommentChange(event) {
            this.setState({comment: event.target.value});
        }
    
        handleCommentSubmit(event) {
            event.preventDefault();
            this.setState({comment: '', comments: [...this.state.comments, this.state.comment]});
        }

        render() {
            return (
                <div>
                    <Comment comments={this.state.comments} />
                    <CommentList comment={this.state.comment} handleCommentChange={this.handleCommentChange} handleCommentSubmit={this.handleCommentSubmit} />
                </div>

            )
        }
    }
    return NewCommentListComponent;
};