Sending container data to {this.props.children}

help
1

So I’ve been using react-meteor-data.

My pattern is this:

<ReactiveUserQuery fields={{name:1}}>
  <MenuWhichDependsOnUserName/>
</ReactiveUserQuery>

In ReactiveUserQuery component, returning <div>{this.props.children}</div> does not also pass the user object to the <MenuWhichDependsOnUserName/>. I have tried React.cloneElement, and passing props there, but I get a bunch of confusing Tracker Errors.

Is there some standard way of passing reactive data to children of the containerComponents?

1 Like
2

What are the errors you get?
I would always just pass them into the component as props, eg:

<ReactiveUserQuery fields={{name:1}}>
  <MenuWhichDependsOnUserName user={this.data._user} />
</ReactiveUserQuery>

Assuming you’ve got this in the parent component.

  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      _user: Meteor.user()
    }
  }

You might be seeing tracker errors because your user collection hasn’t yet been fully subscribed to?
If you’re having issues with that either set a loading page up or use FastRender for the user collection.

3

I’m using the new react-meteor-data. I didn’t know they stored the data in this.data… I thought this was only true for the Mixin version? Meteor gets upset when I try to use React.cloneElement to pass the props to children of the WatchUsers container…

Exception from Tracker recompute function:
debug.js:41 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

class WatchUsers extends Component {
    render() {
        return <div>{React.cloneElement(this.props.children,{...this.props})}</div>
    }
};


export default createContainer((params) => {
    let q = params.query || {};
    if (params.isMe){q._id = Meteor.userId()};
    return {
        users: !params.one && !params.isMe && Meteor.users.find(q, params.options).fetch() || undefined,
        user: params.one && !params.isMe && Meteor.users.findOne(q, params.options) || undefined,
        me: params.isMe && Meteor.users.findOne(q, params.options) || undefined
    }
}, WatchUsers)

export default class Menu extends Component {
	render(){
		return (
			<WatchUsers isMe={true}>
				<MenuHeader {...this.props}/>
				<MenuList {...this.props}/>
			</WatchUsers>
		)
	}
}
4

Apprently this is an open bug with react-meteor-data.
Here’s the github issue: https://github.com/meteor/react-packages/issues/179

5

oh sorry! I thought that was the mixin, I am pretty sure i’ve got react-meteor-data installed for my app… so confusing :stuck_out_tongue:

6

React-meteor-data provides the mixin api? I thought they replaced it with the new createContainer?