How to embed a component in another?

[volkanunsal]

I have a question about how to nest two React components using your library/ Say I have 2 components:

SidebarView = React.createBackboneClass({
  render: function() {
     var coll = this.getModel();
      return (
        <section role="sidebar">
          <UserView />
        </section>
      );
    }
});

UserView = React.createBackboneClass({
    changeOptions: "change:name, change:life", // DEFAULT is "change",
    render: function() {
       var coll = this.getModel();
        return (
          <h1>
            {coll.map(function(model) {
              return <i>{model.get("name")}:{model.get("life")}</i>;
            })}
          </h1>
        );
      }
});

I can embed the UserView in SidebarView, but that is not going to have the state in the model. And when I try adding the instance of the UserView into SidebarView, it doesn't work –– or maybe I couldn't make it work. Can you please elaborate on how to do this? Maybe add an example in the README file?

[clayallsopp]

You need to pass the model as a property when creating the view:

SidebarView = React.createBackboneClass({
      ...
      return (
        <section role="sidebar">
          <UserView model={this.getModel()} />
        </section>
      );
});