Conditional Rendering in Meteor + React

Question

I\'m trying to get some conditional rendering in Meter + React. I only want a component to show up if the number of items returned from a collection === 0.

I tried

Answer 1

You must wait for the data to finish with synchronization. The flash is there because initially MiniMongo collections are empty. (Also, you might want to avoid Collection.find() in your render function.)

Assuming you use Meteor 1.3.x:

export const MyComponent = createContainer(() => {
  let subscription = Meteor.subscribe('something');
  if (!subscription.ready()) return {};
  return {
    tokens: Tokens.find().fetch()
  }
}, InternalComponent);

And then check for the existence of props.tokens in your React component.

class InternalComponent extends React.Component {
  render() {
    if (!this.props.tokens || this.props.tokens.length > 0) return;
    return ;
  }
}

Find out more about subscriptions here: http://docs.meteor.com/#/full/meteor_subscribe