Rendering the OpenedArticle

OpenArticleRender.js

class OpenArticle extends Component {
  static propTypes = {
    article: PropTypes.article.isRequired,
    getCard: PropTypes.func.isRequired,
    openArticle: PropTypes.oneOfType([PropTypes.bool, PropTypes.article]).isRequired,
  };

  shouldComponentUpdate(newProps) {
    const oldOpenSlug = this.props.openArticle && this.props.openArticle.slug;
    const newOpenSlug = newProps.openArticle && newProps.openArticle.slug;
    const openNow = oldOpenSlug === this.props.article.slug;
    const shouldOpen = newOpenSlug === this.props.article.slug;
    if (openNow !== shouldOpen) {
      if (openNow) {
        console.log(`%c[closing] %c${this.props.article.slug}`, 'color: red;', '');
      } else {
        console.log(`%c[opening] %c${this.props.article.slug}`, 'color: green;', '');
      }
    }

    return openNow !== shouldOpen;
  }

  render() {
    const { article, openArticle } = this.props;
    // console.log(`%c[rendering] %c${article.id}: ${article.slug}`, 'color: blue', '');
    if (!openArticle || openArticle.slug !== article.slug) {
      return <TransitionGroup />;
    }

    return (
      <TransitionGroup>
        <OpenedArticle key={article.slug} {...this.props}>
          {article.headline}
        </OpenedArticle>
      </TransitionGroup>
    );
  }
}

This seems to be working properly; closing and opening when necessary.