Use Meteor React Container in other components

react
1

Hi there,

I have a problem with the following situation using Meteor 1.3 and React:

I have a component called “Dashboard”, for which I use a subcomponent in the Render function:

render () {
…

return (

< subComponent param1={this.props.something} />
…
)
}

The subComponent contains in it’s render function a find and fetch on a collection, e.g.:

render()
{
…

   var results = collection.find().fetch(this.props.param1);

   return() {
      <div>
     { results }
     </div>
   }

   ...
}

Now the subcomponent should re-render once the collection changes as used in its render function. This is however not working. I have read something about React Containers, but I can only find how to use them in Routers, not in components itself.

Can anyone please advice in this one?

Thanks in advance.

2

First, it is an anti-pattern to have your data logic in the render function.

Containers can be used like components. createContainer is currently not documented very well, but this is how I would do it. You can pass props to a container as arguments. For example:

<SubComponentContainer param1={param1}/>

then in your SubComponentContainer, you can retrieve the props like this:

export default createContainer(( props ) => {
    const param1 = props.param1;

Your container then could use the param to query a publication and pass the data to a component.