Unable to get params when passing Parent's props to child component

Question

I am trying to build a simple app which just lists blogs using App Component as IndexRoute

<Router history={browserHistory}>
  <Route path="/" component={Root}>
    <IndexRoute component={() => <App loader={this.props.fetching} posts={this.props.posts} fetching={this.props.fetching} fetched={this.props.fetched} />}>
    </IndexRoute>
    <Route path="form" component={Form}></Route>
    <Route path="about" component={About}></Route>
    <Route path="post/:id" component={SinglePost}></Route>
  </Route>
</Router>

I am trying to display, the single blog post using SinglePost Component when the title is clicked.

import React from 'react';

class SinglePost extends React.Component {
 render(){
   console.log("Single Post Props", this.props);
     return(
     <div>
       Passed: {this.props.params.id}
        </div>
   );
 }
}

export default SinglePost;

So, I am getting its id. and I can access it. Using this in App Component:

<Route path="post/:id" component={SinglePost}></Route>

But, i want to pass the posts props in the parent

const mapStateToProps = (state) => {
return {
    fetching: state.fetching,
    fetched: state.fetched,
    posts: state.posts,
    error: state.error
};  };

SO i changed the component={} in the Router from:

<Route path="post/:id" component={SinglePost}></Route>

into this(as I searched that this is the way to pass props in react-router [react-router - pass props to handler component):

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

Now, i am getting this error because it is not getting the params prop.

How can I access the params prop again so I can sort the array of posts by via passed params :id ?

Ishan Jain · Answer 1 · 2017-01-21T12:02:52.000

0

You are using Arrow Functions. Arrow Functions do not bind this value automatically, So you need to do bind this manually.

The code Snippet doesn't works, And it won't because you simply pasted JSX code in plain HTML.

But, Replacing

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

with

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts.bind(this)}/>} />

should work, or you can use function() {} to bind this for you.

Edit:

Preferred way of passing props in react-router

var props = {
    prop1: "PropContent"
}

<SinglePost {...props} />

And this can be accessed in Single post component,

{this.props.route.prop1}  // PropContent

edited Jan 21 '17 at 12:02

answered Jan 21 '17 at 11:13

Ishan Jain

578
4
18

wanted to know if arrow function doesn't bind automatically then whats the use of it ..? check this: http://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 – Mayank Shukla Jan 21 '17 at 11:24
@MayankShukla You can use arrow functions if you don't want to store a reference to actual this for use inside a function called in the main function, Because the new function in main function will change the value of this. Using Arrow Function doesn't changes the value of this so you don't need to store this anywhere else for use in functions called inside main function. – Ishan Jain Jan 21 '17 at 11:38
It says bind is not a function... what is the preferred way to pass props to router cmponent? – Mark Warren Jan 21 '17 at 11:44
1

@MarkWarren Check Answer, I wrote it there. – Ishan Jain Jan 21 '17 at 12:03

Unable to get params when passing Parent's props to child component

1 Answers1