Masonry layout with imagesLoaded

Question

I have created a masonry grid which contains some images or text. I use masonry.desandro for the masonry grid. Until now I set fix heights for the items. For example items with text: 200px and items with image:300px.

But I want to remove these fix heights. For the items with only text, the masonry grid still works fine. But I've an issue with the items which contains images. The items with an image are overlapping. I have seen on the website of masonry, that I have to use imagesLoaded to initialize the grid after the images were loaded.

  // Initialize masonry-layout
  initMasonry() {
    this.masonry = new Masonry('.container', {
      itemSelector: '.item',
      columnWidth: '.item',
    });
  }

  getPosts() {
        API call (get text and images for the items)
        ...
        ...
       let grid = document.querySelector('.container');
       imagesLoaded( grid ).on( 'progress', function() {
          // layout Masonry after each image was loaded
          this.masonry.reloadItems();
          this.masonry.layout();
       });
  }
  componentDidMount() {
    // Show the loading screen
    this.props.isLoading(true);
    // Fetch posts from API
    this.getPosts();
    this.initMasonry();
  }

I have added imagesLoaded into the function getPosts(). But now I get an error message: TypeError: Cannot read property 'reloadItems' of undefined

Thanks for your help:)!