How to handle Meteor Data that requires state from child component? How to handle Meteor Data that requires state from child component? reactjs reactjs

How to handle Meteor Data that requires state from child component?


You can split the old component into two partial components: one that holds the state and handles events, and a pure one that merely displays results. Make sure to pass event handlers as callbacks to the child component. Also note how the parent component uses the return value of the createContainer() function.

// Parent component, setState should go hereexport default class StateHolder extends React.Component {  constructor(params) {    super(params);    this.state = {myKey: 1};  }  incrementKey() {    this.setState({myKey: this.state.myKey + 1});  }  render() {    return <Container myKey={this.state.myKey} onClick={this.incrementKey.bind(this)} />;  }}// Child component, renders onlyclass PureComponent extends React.Component {  render() {    return <div>      {this.props.myValue}      <button onClick={this.props.onClick}>click me</button>    </div>;  }}// Decorated child container. // Make sure to use this one in parent component's render() function!let Container = createContainer((props) => {  let doc = MyCollection.findOne({someKey: props.myKey});  return {    myValue: doc ? doc.someValue : null  }}, PureComponent);