Sending container data to {this.props.children}

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

My pattern is this:

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

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

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

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

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.

I’m using the new react-meteor-data. I didn’t know they stored the data in… 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.isMe && Meteor.users.find(q, params.options).fetch() || undefined,
        user: && !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 {
		return (
			<WatchUsers isMe={true}>
				<MenuHeader {...this.props}/>
				<MenuList {...this.props}/>

Apprently this is an open bug with react-meteor-data.
Here’s the github issue:

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:

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