React Microstates Waaaaat

is_this_evil.rb

import React from "react";
import { Consumer } from "@microstates/react";
import { map } from "microstates";

export default class Blog extends React.Component {
  render() {
    return (
      <Consumer>
        {blog => {
          return (
            <div>
              <h1>{blog.title.state}</h1>
              <hr />
              {map(blog.posts, post => (
                <Post getMS={() => post} key={post.state.title} />
              ))}
            </div>
          );
        }}
      </Consumer>
    );
  }
}

export class Post extends React.Component {
  constructor(props) {
    super(props);
    this.commentBox = React.createRef();
  }

  addComment(body) {
    this.props.getMS().comments.push({ body });
  }

  render() {
    let { body, title, author, comments } = this.props.getMS().state;
    return (
      <div>
        <h2>{title}</h2>
        <span>by {author.fullName}</span>
        <br /> <br />
        <div>{body}</div>
        <span>{comments.length} Comments</span>
        <br /> <br />
        <h4>Add Comment</h4>
        <textarea ref={this.commentBox} />
        <button onClick={() => this.addComment(this.commentBox.current.value)}>
          Comment
        </button>
      </div>
    );
  }
}