javascript - React/Meteor init function when data is fully rendered -

i have following react component, subscribes mongodb loads images , returns page.

export default class portfolio extends trackerreact(react.component) {    constructor(props) {     super(props);     this.state = {       subscription: {         albumbs: meteor.subscribe('albums')       }     }   }    componentwillunmount() {     this.state.subscription.albums.stop();   }    albums() {     return albums.find().fetch();   }    render() {      function init () {       $('.carousel').flickity({         // options         "lazyload": true       });     };        return (       <reactcsstransitiongroup component='div' classname='carousel'  transitionname='postload' transitionleavetimeout={2000} transitionentertimeout={2000}>        {this.albums().map( (album) => {          return <div classname='carousel-cell' key={album._id}><albumcover  albums={album} /></div>        })}        {init()}      </reactcsstransitiongroup>     );   } } 

the current init function makes successful init carousel classes, looks data loaded faster carousel inited , thought images nested outside of carousel slider.

your subscription not yet ready , carousel function triggering before data subscribed to, that's why having error.

you have make sure subscribed collection. try create reactive container, set few session variables , subscribe (import container via import {createcontainer} 'meteor/react-meteor-data'):

export default createcontainer(() => {   const subscription = meteor.subscribe('albums');   subscription.ready() ? session.set("subready", true) : session.set("subready", false);    return{     album: albums.find().fetch(),   } }, portfolio); 

then in render() component:

render(){   if(session.get("subready")){   return (      <reactcsstransitiongroup component='div' classname='carousel'  transitionname='postload' transitionleavetimeout={2000} transitionentertimeout={2000}>       {this.albums().map( (album) => {         return <div classname='carousel-cell' key={album._id}><albumcover  albums={album} /></div>       })}       {init()}     </reactcsstransitiongroup>    ); } } 

and not forget, add carousel code in componentdidmount() method:

componentdidmount(){   if(session.get("subready")){     function init () {    $('.carousel').flickity({      // options      "lazyload": true    });  };   } } 

i didn't test code on computer, works out you.

if want use method of subscribing, make sure that:

1) subscription ready.

2) make sure carousel code in componentdidmount() method , wrapped in reactive way trigger when data ready/subscribed to.