Hello,
Can someone Help me.
i want to access the Parameter in createContainer class
import React, {Component} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
import {PropTypes} from 'prop-types';
import {Meteor} from 'meteor/meteor';
//db
import {Usersdata} from '../api/Userdata.js';
//component
import Printid from './Printid.jsx';
class Print extends Component {
renderId(){
return this.props.usersdata.map((userrefs) =>(
<Printid key={userrefs._id} userrefs={userrefs} />
));
}
render(){
return(
<div>
{this.renderId()}
{this.props.match.params.refscode}
</div>
);
}
}
export default createContainer(()=>{
Meteor.subscribe('usersdata');
let refnumber = this.props.match.params.refscode;
return{
usersdata: Usersdata.find({refcode: refnumber}).fetch(),
}
}, Print);
I’m so confuse now. Please Help. Thank you so much.
1 Like
Did you try
export default createContainer(({ params }) => {
export default createContainer(({ params })=>{
Meteor.subscribe('usersdata');
let refnumber = this.props.match.params.refscode;
return{
usersdata: Usersdata.find({refcode: refnumber}).fetch(),
}
}, Print);
Thank you for the answer sir.
Ahm. i try the above code but still the error is Cannot read property ‘match’ of undefined.
Sir no luck. but now the error is Uncaught TypeError: Cannot read property ‘refscode’ of undefined.
What does your snippet look like where you mount the Print
component?
1 Like
Sir i direct it to Route
Main.jsx
Meteor.startup(()=>{
render((
<Router>
<Switch>
<Route exact name="index" path="/" component={App} />
<Route name="login" path="/admin/login" component={Login} />
<Route name="admin" path="/admin/admin" component={Admin} />
<Route name="refcode" path="/print/refcode/:refscode" component={Print} />
</Switch>
</Router>
), document.getElementById('render-target'));
});
Printid.jsx
import React, {Component} from 'react';
class Printid extends Component{
render(){
return(
<div>
<table>
<tbody>
<tr>
<td>{this.props.userrefs.refcode}</td>
<td>{this.props.userrefs.fname}</td>
</tr>
</tbody>
</table>
</div>
);
}
}
export default Printid;
Thank you so much for your help sir.
What do you get when you console.log({ params });
in createContainer
?
1 Like
Sir i get this on console.log({params});
Object {params: undefined}
params
:
undefined
__proto__
:
Object
constructor
:
function Object()
hasOwnProperty
:
function hasOwnProperty()
isPrototypeOf
:
function isPrototypeOf()
propertyIsEnumerable
:
function propertyIsEnumerable()
toLocaleString
:
function toLocaleString()
toString
:
function toString()
valueOf
:
function valueOf()
__defineGetter__
:
function __defineGetter__()
__defineSetter__
:
function __defineSetter__()
__lookupGetter__
:
function __lookupGetter__()
__lookupSetter__
:
function __lookupSetter__()
get __proto__
:
function __proto__()
set __proto__
:
function __proto__()
I haven’t upgraded to React Router 4, but it seems that should work unless it’s something with React Router 4 that makes it different. So you are loading an url in the correct form as in the path?
/print/refcode/:refscode
1 Like
Yes sir. i can output the params in render method.
but on createContainer class i get an error.
Thank you sir. at-least i get an idea on how it should work.
Basically you’re missing the props
parameter (the first parameter of the function passed to createContainer
. You can’t use this.props
because this
refers to your container, not your component. Try this:
export default createContainer((props) => {
Meteor.subscribe('usersdata');
let refnumber = props.match.params.refscode;
return {
usersdata: Usersdata.find({refcode: refnumber}).fetch()
}
}, Print);
I also notice you’ve got refscode / refcode (plural / singular) - just checking one of them isn’t a typo.
3 Likes
Thank you meteor friends.
I already solved my problem using this code.
export default createContainer(({match})=>{
Meteor.subscribe('usersdata');
console.log(match);
let refcode = match.params.refscode;
return{
usersdata: Usersdata.find({refcode: refcode}).fetch(),
}
}, Print);
Thanks all for the help!
2 Likes