2

I have a component which cannot traditionally inherit props from a parent component. This component is rendered via a route and not by a parent, I am talking about the <Single /> component which is the 'detail' component in this setup:

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={ProfileList} />
      <Route path="/profile/:username" component={Single} /></Route>
  </Router>

Props are available in the ProfileList component and that component renders a Profile component like so:

   /* ProfileList render method */
   render() {
      return (
        <div>
          {this.state.profiles.map((profile, i) => 
            <Profile {...this.state} key={i} index={i} data={profile} />)}
        </div>
      );
    }

I am trying to reuse the Profile component in both the ProfileList and Single component:

  <Link className="button" to={`/profile/${username}`}>
   {name.first} {name.last}
  </Link>

But in the Single component I have no way of accessing state or props - so I have no way of rendering this details view. I know I can either use redux for passing global state or use query parameters in my Link to=""

But I don't want tor reach out for redux yet and don't feel right about query params. So how do I access something like this.props.profiles in my Single component?

Community
  • 1
  • 1
Amit Erandole
  • 11,995
  • 23
  • 65
  • 103
  • Maybe Router params? http://stackoverflow.com/questions/32901538/how-does-react-router-pass-params-to-other-components-via-props – Brad Jun 01 '16 at 01:02
  • no @Brad - I don't want to query params if that is what you mean – Amit Erandole Jun 01 '16 at 01:03
  • ProfileList and Single are sibling components, then why cannot Single access state? – hazardous Jun 01 '16 at 07:20
  • Because they are siblings not parent child. The props are in ProfileList - how do I pass them to the Single component that is NOT rendered by ProfileList? – Amit Erandole Jun 01 '16 at 08:50

1 Answers1

0

the redux connect() can completely do the job. I think you should use it, because "in fine" you will reimplement a redux connect like

Michael Rasoahaingo
  • 1,069
  • 6
  • 11