How to use with React?

[Sam Hulick]

I've a quick question about using this with React.

I noticed that referencing Store methods in render() are not reactive. E.g.:

Home = React.createClass({
  render() {
    return (
      <div>
        <p>Number of clicks: {Store.getClicks()}</p>
        <Clicker />
      </div>
    )
  }
});

Clicker = React.createClass({
  handleClick() {
    Dispatcher.dispatch({
      action: 'USER_CLICKED_INCREMENT',
      data: 'Yes!'
    });
  },

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click to Increment</button>
      </div>
    )
  }
});

I'm wondering what the best way to deal with reactivity is. I can think of one way off the top of my head, but if there's a better way, let me know.

Home = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {clicks: Store.getClicks()};
  },

  render() {
    return (
      <div className="wow">
        <p>Number of clicks: {this.data.clicks}</p>
        <Clicker />
      </div>
    )
  }
});

[Luis Herranz]

I am no React expert but I think you are right, there is no Meteor reactivity in the render() method.

Using getMeteorData is probably the way to go. If you want to create pure React components (without Meteor mixin), wrap them in another "React with Meteor mixin" component which only does the getMeteorData and pass the data as props to the pure React component. Then use the render method as usual:

React.createClass({
  render() {
    return (
      <div>
        <p>Number of clicks: {this.props.clicks}</p>
        <Clicker />
      </div>
    )
  }
});

That way your pure React component is more reusable and can be used even outside Meteor.

[Sam Hulick]

Perfect, thanks for the reply!