src/templates/SingleJob/Description.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styles from './Description.module.scss'
import posed from 'react-pose'

const Content = posed.div({
  closed: { height: '225px' },
  opened: { height: 'auto' },
})

class Description extends Component {
  state = { isOpen: false }

  toggleDescription = () => {
    this.setState({ isOpen: !this.state.isOpen })
  }

  render() {
    const { title, company, content } = this.props
    return (

      <div className={styles.root}>
        <h1 className={styles.title}>{title}</h1>
        <div className={styles.companyData}>
          <span className={styles.company}>{company}</span>
        </div>
        <Content className={styles.content} pose={this.state.isOpen ? 'opened' : 'closed'}>
          {content}
          {!this.state.isOpen && <div className={styles.gradient} />}
        </Content>
        <button onClick={this.toggleDescription} className={styles.showMore}>
          {!this.state.isOpen ? 'Read full job description' : 'Show less'}
        </button>
      </div>
    )
  }
}

Description.propTypes = {
  title: PropTypes.string,
  url: PropTypes.string,
}

export default Description