Reputation: 4368
There's a lot of questions and answers around what I'm asking, but I feel like I'm reading it and applying it correctly it just isn't working and I'm getting undefined on my props
every time.
So I have my parent component here:
let meeting = { title: 'Some title', };
Meteor.startup(() => {
render((
<Router>
<div>
<Nav />
<Route exact path="/" component={Start} dataMeeting={meeting} />
<Route path="/app" component={App} />
<Modal />
</div>
</Router>
), document.getElementById('render-target'));
});
Then in my other file where my Start
component is I do a console.log
on this.props
export default class Start extends Component {
render() {
console.log(this.props.dataMeeting);
return (
<div className="home">
<p>test</p>
</div>
);
}
}
In my console.log
I get back undefined, and when I just console.log
the this.props
I can't see my dataMeeting
in the object.
Any idea why I'm misunderstanding?
Thanks!
Upvotes: 1
Views: 178
Reputation: 36541
Looks like you are using react-router
v4, you can pass props by using the render
prop instead of component
:
<Route path="/" render={()=><Start dataMeeting={meeting} />}/>
As @ToddChaffe pointed out, you could (but should not) use the component
prop in the same manner:
<Route path="/" component={()=><Start dataMeeting={meeting} />}/>
however that will recreate the component on every render.
Upvotes: 3
Reputation: 11591
It is very poorly documented, but you should use this.props.route
.
export default class Start extends Component {
render() {
console.log(this.props.route.dataMeeting);
return (
<div className="home">
<p>test</p>
</div>
);
}
}
Upvotes: 0