hide items until layout is ready?

[freder]

hi,

I want to make sure the layout is ready, before I display all items. I tried the following, but that does not seem to do the trick (I still see a mess of items, for a fraction of a second):

import React from 'react';
import Masonry from 'react-masonry-component';

const masonryOptions = {
    transitionDuration: 0,
};

const MasonryLayout = React.createClass({
    getInitialState() {
        return { layoutReady: false };
    },

    handleLayoutReady() {
        if (!this.state.layoutReady) {
            this.setState({ layoutReady: true });
        }
    },

    render() {
        const { children } = this.props;

        return <div>
            <div
                className='wrapper'
                style={{ 
                    // display: (this.state.layoutReady)
                    //  ? undefined
                    //  : 'none',
                    visibility: (this.state.layoutReady)
                        ? 'visible'
                        : 'hidden', 
                }}
            >
                <Masonry
                    options={masonryOptions}
                    onLayoutComplete={this.handleLayoutReady}
                >
                    {children}
                </Masonry>
            </div>
        </div>;
    },
});

export default MasonryLayout;

am I missing anything?

[sanmaopep]

Try onLayoutComplete={this.handleLayoutReady.bind(this)} .

[cdtinney]

Try onLayoutComplete={this.handleLayoutReady.bind(this)} .

This should be done in the constructor otherwise this will create a new function every time render() is called.

e.g.

constructor(props) {
  super(props);

  this.handleLayoutReady = this.handleLayoutReady.bind(this);
}