Teaser rendering of an Article

ArticleTeaser.js

// Simple component that render an Article

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import moment from 'moment';
import truncate from 'html-truncate';

import './Article.css';

class ArticleTeaser extends Component {
  createBodyMarkup(markup) {
    return { __html: truncate(markup, 600) };
  }

  render() {
    const { article } = this.props;
    const momentDate = moment(article.created * 1000).format('DD MMM YYYY');
    return (
      <div className="article article--teaser">
        <h2 className="article__title">
          <Link to={`/articles/${article.uuid}`}>{article.title}</Link>
        </h2>
        <div className="article__date">{momentDate}</div>
        <div
          className="article__body"
          dangerouslySetInnerHTML={this.createBodyMarkup(article.body.value)}
        />
        <div className="article__links">
          <Link to={`/articles/${article.uuid}`}>Leggi</Link>
        </div>
      </div>
    );
  }
}

export default ArticleTeaser;