rickvanlieshout.com/components/ReadNext/index.jsx

import React from 'react'
import { Link } from 'react-router'
import { prune, include as includes } from 'underscore.string'
import find from 'lodash/find'

import './style.sss'

class ReadNext extends React.Component {
  render() {
    const { pages, post } = this.props
    const { readNext } = post

    let nextPost
    if (readNext) {
      nextPost = find(pages, (page) =>
        includes(page.path, readNext)
      )
    }
    if (!nextPost) {
      return React.createElement('noscript', null)
    } else {
      nextPost = find(pages, (page) =>
        includes(page.path, readNext.slice(1, -1))
      )
      const description = nextPost.data.description

      return (
        <div>
          <h6
            style={{
              fontSize: '16px',
              margin: '20px 0 0'
            }}
          >
            READ THIS NEXT:
          </h6>
          <h3
            style={{
              margin: '5px 0 0'
            }}
          >
            <Link
              to={nextPost.path}
              query={{readNext: true}}
            >
              {nextPost.data.title}
            </Link>
          </h3>
          <p className='description'>{description}</p>
        </div>
      );
    }
  }
}

ReadNext.propTypes = {
  post: React.PropTypes.object.isRequired,
  pages: React.PropTypes.array,
}

export default ReadNext