Cannot read property 'displayName' of undefined

[artndes9]

i am getting undefined error on itemComponent.
the code from view.jsx

`const componentName = itemComponent.type.displayName || itemComponent.type.name;`

if you can explain MyMasonryItem class it would be really helpful right now

[coleturner]

The code shared still has some leftover pieces from where it was originally pasted.

Does the following work instead?

const componentName = itemComponent.constructor.displayName || itemComponent.constructor.name;

It's looking for .type which is something is specific to where I wrote it - doesn't apply here

[artndes9]

i changed that now onto the next line
const componentName = itemComponent.constructor.displayName || itemComponent.constructor.name;

`if (!('getHeightFromProps' in itemComponent.constructor) && !('getHeightFromProps' in itemComponent.type)) {
  throw new Error(`Component type ${componentName} does not respond to 'getHeightFromProps'`);
}`

throws error
"Cannot use 'in' operator to search for 'getHeightFromProps' in undefined"

[artndes9]

i am trying to cleanup the code but i still cant understand out
static getHeightFromProps = (getState, props, columnSpan, columnGutter) => { return IMAGE_HEIGHT + TITLE_HEIGHT + FOOTER_HEIGHT; }
in class MyMasonryItem

[coleturner]

Give the latest revision a try, for your component you will need a static function called getHeightFromProps which returns the pixel height of the item based on those arguments. Column span is the number of columns the item will lay across, and columnGutter is the spacing between.

[artndes9]

Still the same error itemComponent returns undefined.
"Cannot use 'in' operator to search for 'getHeightFromProps' in undefined"

if (!('getHeightFromProps' in component.constructor) && !('getHeightFromProps' in component.type)) { throw new Error(Component type ${componentName} does not respond to 'getHeightFromProps'); }

btw did you forgot to change component to itemComponent or is it supposed to be that way??

[coleturner]

Yeah sorry, this was copy pasted when I wrote the article. The implementation I used at the time had much more custom logic. Give the latest revision a shot 👍

[artndes9]

i am halfway through..
can you please share onInfiniteLoad ()

and shouldn't there be a way to disable infiniteload?

[coleturner]

onInfiniteLoad is just a function that you can use to react to the scrolling state of the page.

You can disable it by removing the code that handles the checking or firing. I believe you can also specify props.threshold = -99999 which should invalidate the conditionals.

[artndes9]

Hey layout engine is working fine now but the items keep disappearing from the page it happens sometime on scroll and almost always on window resize i don't have infiniteLoading just finite set items.
any idea what could be causing this?

[artndes9]

i removed the onclickListeners. now scrolling doesn't make the images go away but now the most images doesn't even load on mobile devices!!! will on desktops it does.
what could be causing this? really could use your help......

[coleturner]

Please provide a REPL or example app where the issue is occurring and I will take a look 👍

[matthiaskleinklein]

I am new to REACT. I can't understand, how the MyMasoneryItems are instantiated. I do have to provide an array of objects of this type, or any other type that implements that specification, right? How do I technically do that? Many greetings in advance from Berlin!

[artndes9]

@matthiaskaemi there is an example in the file Link

[matthiaskleinklein]

@artndes9 yes I saw the Example, but:

const myArrayOfItems = [{ name: 'Hello' }, { name: 'World' }]

how do I fill this array with reasonable Items...?

[coleturner]

@matthiaskaemi you can use whatever properties you like so long as they fit the shape of the props expected by MyMasonryItem or whatever you prefer to call it :)

Side note: this issue has run it's course. Folks please feel free to open a separate issue