Components are not rendering

[wuelcas]

Hi,

Tried to use your library but the components are not rendering. Also I'm using VS Code and it can't find the definition for the XMasonry and XBlock components when I import them.

Basically I have this:

import { XMasonry, XBlock } from 'react-xmasonry';

/* ... */
return (
  <XMasonry>
    <XBlock>
      <Something />
    </XBlock>
    <XBlock>
      <Something />
    </XBlock>
  </XMasonry>
)

But the "Something" components are not appearing on screen. I'm using the React Dev Tools and the components are also not appearing there, and it doesn't throw any errors in the console. It's like is not in my code but I'm really sure I'm doing things right and the simple as I can.

Some pics:

[nikitaeverywhere]

Hello! Thanks for the issue report!

The warning No definitions found for 'XMasonry' is okay: the main in package.json refers to minified library file, which usually IDE tools are skipping to parse. You can try doing this to avoid the warning:

import { XMasonry, XBlock } from 'react-xmasonry/src/index.jsx';

Regarding to the elements not appearing, try replacing <Something/> with something I can obviously see :) It would also be nice if you post a little demo...

Okay, I see the issue. Just add an unique key property to the elements, see this pen. I will try to look to the key resolving mechanism once I will have some time.

Please let me know if it helps.

[wuelcas]

No luck :/ I copied and pasted the code of your pen, I have it like this:

<div className="image-list-content">
  <XMasonry>
    <XBlock key="1">
      <div>
        <h1>Card One</h1>
        <p>Any text</p>
      </div>
    </XBlock>
    <XBlock key="2">
      <div>
        <h1>Card Two</h1>
        <p>Any text</p>
      </div>
    </XBlock>
  </XMasonry>
</div>

On the React Dev Tools I still don't see nothing. On the Elements tab on Chrome Dev Tools where you see the HTML code I see this:

<div className="image-list-content">
  <div class="xmasonry" style="position: relative; height: 0px;"></div>
</div>

But that's it. Really weird. I'm testing several Masonry libs and your library is the only one having this behavior.

[nikitaeverywhere]

Umm...

<div className="image-list-content">
  <div class="xmasonry" style="position: relative; height: 0px;"></div>
</div>

className in HTML? Are you sure you render components correctly?

It would be helpful if you can share your simple example code as-is: js/html/css files, maybe try to make the example on codepen.

[nikitaeverywhere]

Try to resize the window. Did the layout change? What do you see in console/Elements tab?

[wuelcas]

I'm sorry, I copied that line from my editor. In the HTML code it says class, not className

In the console I don't see anything, no errors. In the Elements tab I see what the image above is showing. Resizing the window doesn't work.

I'll try to replicate everything in a simpler example. Thanks for the help!

[nikitaeverywhere]

Very interesting. If you can, please. Thanks!

[nikitaeverywhere]

@wuelcas, please check out new version 2.0.3 of React-XMasonry, I've made some changes that should enable any case to work.

[wuelcas]

I'll give it a try, thank you!

[nikitaeverywhere]

@wuelcas, any feedback?

[wuelcas]

Hi @ZitRos still no luck but I realized that is not a problem with your component, it's a problem with the parent components and tags that wrap the XMasonry component. When I leave the XMasonry and XBlock alone (without any parent tag or component that wrap them) the content appears but it looks terrible of course (the parent tags give the styles to the content of each XBlock). I don't know why that happens and only with your library, so I decided to go with another solution that worked just like I expected. Thanks for the given support. Hopefully, I will use your library another time.

[nikitaeverywhere]

@wuelcas, thank you for your feedback. As a developer, I am very interested to understand the case you had. May I ask you?

When I leave the XMasonry and XBlock alone (without any parent tag or component that wrap them)

I didn't get it, as in React you always tell "render please this component on this element", and "this element" cannot be the <body>. So the minimal layout is this:

<body>
  <div id="reactRoot">
    <!-- XMasonry may go here or even deeper -->
  </div>
</body>

And you will also need some basic CSS as example shows to see some nicely-rendered cards.

Maybe one obvious thing I didn't mention in readme is that #reactRoot element must be a block or inline-block element (or something that has width). I am wondering if this is your case.

Anyway, thank you! :)

[wuelcas]

Well, I'll explain it like this. I'm rendering the XMasonry in a "dumb" component. If return the following code, the XMasonry doesn't render:

return (
  <SomeStyledDivComponent>
    <AnotherComponent>
        <div className="image-upload-content">
          <div className="image-list-content">
            <XMasonry>
              <XBlock>
                  // content
              </XBlock>
            </XMasonry>
          </div>
        </div>
    </AnotherComponent>
  </SomeStyledDivComponent>
);

If I return the following code, the XMasonry renders the content:

return (
  <XMasonry>
    <XBlock>
        // content
    </XBlock>
  </XMasonry>
);

I tried taking every parent component and tag, one by one in different ways but it only renders the XMasonry component when I leave it just alone. I still don't know why. Maybe something about the styles of the divs or something with parent components but I'm still not sure.

About this:

Maybe one obvious thing I didn't mention in readme is that #reactRoot element must be a block or inline-block element (or something that has width). I am wondering if this is your case.

I wonder that same thing and maybe that's the case because the react root element (the styled div component) has a display: flex;. Unfortunately, I can't test that because I found a solution already and testing that will delay the progress that I have in my app, sorry :(

[nikitaeverywhere]

has a display: flex;

Seems like that is the exact issue, see this. If you change the .image-list-content style back to display: block it will work nicely.

Now I am wondering why other masonry layout implementations render your case, but XMasonry does not 🤔 Who knows 😄 In case it is an XMasonry fault, please let me know if you will have any experience with it in likely future! Thanks!