In my React/Meteor app that uses react-router
, I am trying to pass the URL parameters (example URL: /user/P8HDQMAuapRESoWo6
) into createContainer
, which fetches the result of the first MongoDB query
let user = Meteor.users.findOne({ _id: this.props.params.id});
to run the second MongoDB query
users: Meteor.users.find(
{
'location': {
$near: {
$geometry: {
'type': 'Point',
'coordinates': user.location.coordinates
...
However this results in the error
Uncaught TypeError: Cannot read property 'params' of undefined
- How can we access the URL parameters or
this.props.params
? - Should we run the first Mongodb query
Meteor.users.findOne()
insidecreateContainer
?
User.jsx
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
export class User extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
Something
</div>
)
}
}
export default createContainer(() => {
Meteor.subscribe('allUsers')
let user = Meteor.users.findOne({ _id: this.props.params.id});
return {
users: Meteor.users.find(
{
'location': {
$near: {
$geometry: {
'type': 'Point',
'coordinates': user.location.coordinates
},
$maxDistance: 400
}
}
}
).fetch()
}
}, User);
Is it ok to wrap the reuturn
function like this?
export default createContainer(({params}) => {
Meteor.subscribe('allUsers')
let user = Meteor.users.findOne({ _id: params.id});
if(user) {
return {
users: Meteor.users.find(
{
'location': {
$near: {
$geometry: {
'type': 'Point',
'coordinates': user.location.coordinates
},
$maxDistance: 400
}
}
}
).fetch()
}
} else {
return { users: [] }
}
}, User);
createContainer
accepts the props from react-router (or any parent) as function arguments. This should work: