In case others are curious, it actually wasn’t that big a deal.

The pseudo-code (notice, no tappable on the parent ListItem):

<List
  <ListItem>
    Category name
    <List className="childList"
      <ListItem tappable>Item name</ListItem>
    />
>

The CSS:

.list.childList {
	width: 100%;
	border: 0;
}

It looks like this on Android:

It looks like this on iOS:

Is it possible to add a list to another list? What I’m looking for is something like jQueryMobile’s idea of collapsible lists. You have an overarching category and then when you click on that, it expands to show the details inside.

I started by adding a List to a ListItem and while it didn’t error, it displayed the “inside” list next to the category title. Maybe it’s up to me to get crazy with the CSS but I’m just checking here before I venture into that mess!

Aha! You are a wonderful person, @IliaSky, fantastic responses!

you can probably check your dom or your react inspector

I didn’t have a “react inspector” so I added the extension to Chrome and found out what was going on! React was angry that the newly separated components didn’t have the key attribute (not the <Page>). This tiny addition made the errors go away:

renderPage: function(route, nav) {
  route.props = route.props || {};
  route.props.key = route.title;  /* <-- React needs this key to be on <Home />, < Settings />, etc */
  route.props.renderToolbar = this.renderToolbar.bind(this, route);
  route.props.title = route.title;

  return React.createElement(route.page, route.props);
},

Also, there’s definitely issues replacing the page with itself so thanks for commenting on that. I’ll figure out a way to disallow that (disable the menu selection, possibly).

@IliaSky Fantastic, thanks so much! Now I’m trying to figure out how to put each page in its own component and then use that inside the <Navigator /> component. I’ll keep working on it and hope that @argelius and/or @patrick notice this topic!

Edit:
Forgive me for the large post but I thought someone coming in the future may benefit! I think I got it:

// Import pages as separate compents
import Home from "./Home";
import TeamMember from "./TeamMember";

/* pushPage() instead of replacePage() */
load(route) {
  this.hideMenu();
  this.nav.pushPage(route, {animation: "fade"});
},

/* Pass props to the page so it can render the toolbar */
renderPage: function(route, nav) {
  route.props = route.props || {};
  route.props.renderToolbar = this.renderToolbar.bind(this, route);
  route.props.title = route.title;

  return React.createElement(route.page, route.props);
},

And then in render():

<List
  dataSource={[
    {title: "Home", page: Home},
    {title: "Team Member", page: TeamMember}
  ]}
  renderRow={route => (
    <ListItem key={route.title} onClick={this.load.bind(this, route)} tappable>{route.title}</ListItem>
  )}
/>

I am getting an interesting warning in the console though:

My Home.js file is super simple. In its entirety:

import React from "react";
import ReactDOM from "react-dom";
import {Page} from "react-onsenui";

export default React.createClass({
  render() {
    return (
      <Page key={this.props.title} renderToolbar={this.props.renderToolbar}>
        <p style={{textAlign: "center"}}>
          We're on the HOME page!
        </p>
      </Page>
    );
  }
});

Awesome guys! Is this able to be reproduced in the React version?