This is an actual description of a gist

GistsList.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Gist from './GistItem'
import './gistsList.css'

class GistsList extends Component {
  static propTypes = {
    activeGist: PropTypes.string,
    gists: PropTypes.array,
    username: PropTypes.string,
    onSelect: PropTypes.func,
  }

  render() {
    const { activeGist, gists, onSelect } = this.props

    return (
      <div className="gistsList">
        { !gists.length &&
          <p className="error">No gists were found for that user. This probably means that the user does not have any gists or does not exist.</p>
        }
        { gists.map((gist) => {
            return (
              <Gist
                key={gist.id}
                gist={gist}
                onSelect={onSelect}
                activeGist={activeGist}
              />
            )
          })
        }
      </div>
    )
  }
}

export default GistsList