CODEWITHSUNDEEP
javascripthtmlreactjsreact-router
haxpanel
haxpanel

Reputation: 4678

How to create a list with routable items with React-router?

I'd like create a details view inside a list element For example:

My idea is to pass the childrens coming from router down to the Item component ... but there is too much of hassle passing all the item specific values. But is there a nice common way of doing it?

Upvotes: 0

Views: 569

Answers (1)

graham mendick
graham mendick

Reputation: 1839

I've written a JsFiddle that demonstrates a list with routable items. It uses the Navigation router instead of the React Router but I hope you're open to that. You can see that I pass the list of items into the Items component and the selected Item down to the Item component. The Item component is a Hyperlink, built using the router's RefreshLink. Clicking the Hyperlink passes the selected item number down and the Item component changes the selected item's display. If you've got any questions about the code, please let me know.

var {StateNavigator} = Navigation;
var {RefreshLink} = NavigationReact;

var Items = ({items, id, stateNavigator}) => (
  <ul>
    {items.map((item, i) => (
      <Item
        item={item}
        id={i}
        selected={i === id}
        key={i}
        stateNavigator={stateNavigator} />
    ))}
  </ul>
);

var Item = ({item, id, selected, stateNavigator}) => (
  <li>
    <RefreshLink
      navigationData={{id: id}}
      disableActive={true}
      stateNavigator={stateNavigator}>
      {!selected ? item : 'more details for ' + item}
    </RefreshLink>
  </li>
);

var stateNavigator = new StateNavigator([
  {key: 'items', route: '{id?}'}
]);

stateNavigator.states.items.navigated = (data) => {
  ReactDOM.render(
    <Items
      items={['item 1', 'item 2', 'item 3']}
      id={data.id}
      stateNavigator={stateNavigator} />, 
    document.getElementById('container')
  );
};

stateNavigator.start();

Upvotes: 1

Related Questions