Starting ImageGrid Component

ImageGrid.js

import React, {Component} from 'react'
import Masonry from 'masonry-layout'
import './ImageGrid.css'

export default class ImageGrid extends Component{
  state = { allImagesLoaded: false }
  imagesLoaded = 0

  handleImageLoad = () => {
    this.imagesLoaded++
    if (this.imagesLoaded === this.props.profile.images.length) {
      this.setState({ allImagesLoaded: true })
    }
  }

  createGrid() {
    let grid = document.getElementById('ImageGrid')
    if (grid) {
      this.layoutGrid(grid)
    }
  }

  layoutGrid(grid) {
    const masonry = new Masonry( grid, {
      itemSelector: '.grid-item',
      columnWidth: '#grid-sizer',
      percentPosition: true
    })
    masonry.layout()
  }

  render() {
    const {
      profile
    } = this.props
    return ( 
      <div id="ImageGrid" className={!this.state.allImagesLoaded && 'loading'}>
        <div id="grid-sizer">
          {
            profile.images.map(img => {
              return (
                <img key={img} className="grid-item" src={img} onLoad={this.handleImageLoad}/>
              );
            })
          }
        </div>
      </div>
    );
  }
}