javascript - reactjs and masonry layout - undefined

Question

I have done an npm install on masonry-layout -- but when I render this component it comes up with an element undefined error? "Cannot set property 'element' of undefined"

here is a jsfiddle

http://jsfiddle.net/0ht35rpb/82/

I am new to reactjs and I am trying to get the masonry layout grid to work. https://masonry.desandro.com/#package-managers

import React from 'react'
// import $ from 'jquery'

import Masonry from 'masonry-layout'

class VideoGrid extends React.Component {
  componentDidMount () {
    this.invokeMasonry()
  }

  invokeMasonry () {
    var elem = document.querySelector('.grid')
    Masonry(elem, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    })
  }

  render () {
    return (
      <div className='grid'>
        <div className='grid-sizer width2' />
        <div className='grid-item width2'>
          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg' />
        </div>
        <div className='grid-item width2'>
          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg' />
        </div>
      </div>
    )
  }
}

export default VideoGrid

Answer 1

as per documentation,

var elem = document.querySelector('.grid')
    Masonry(elem, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    })

Should be:

 var elem = document.querySelector('.grid')
var msnry = new Masonry( elem, {
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          percentPosition: true
});