CODEWITHSUNDEEP
javascriptreactjsreact-router
pourmesomecode
pourmesomecode

Reputation: 4368

Passing props to child using Route

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

Answers (2)

Rob M.
Rob M.

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

jered
jered

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

Related Questions