AutoMate/frontend/components/Gallery.js

import styled from 'styled-components'

const GalleryStyle = styled.div`
  border: 1px solid ${props => props.theme.lightblue};
  margin-bottom: 1.5em;

  #header {
    padding: 0 0.3em;
    background-color: ${props => props.theme.lighterblue};
    color: ${props => props.theme.darkblue};
    cursor: pointer
  }
`

class Gallery extends React.Component {
  state = {
    galleryOpen: !!this.props.galleryOpen
  }

  openGallery = event => {
    this.setState({ galleryOpen: !this.state.galleryOpen })
  }

  render() {
    const { items, title } = this.props
    return (
      <GalleryStyle>
        <div onClick={this.openGallery} id="header">
          {this.state.galleryOpen ? <span>&#8259;</span> : <span>&#8227;</span>} {items.length} {title} available (click to {this.state.galleryOpen ? 'hide' : 'see'})
        </div>
        <div style={{ display: this.state.galleryOpen ? 'block' : 'none' }} id="gallery">
          {items}
        </div>
      </GalleryStyle>
    )
  }
}

export default Gallery