title: React + Backbone nested components
body: <p>I've recently started using reactjs with backbone. I searched and found <a href="https://stackoverflow.com/users/458193/dan-abramov">Dan Abramov</a>'s answer <a href="https://stackoverflow.com/questions/21709905/can-i-avoid-forceupdate-when-using-react-with-backbone#answer-21709906">here</a>. I've been using his mixin successfully until I started using nested components.</p>
  
  <p>Assume I have a <code>user</code> model as follows</p>
  
  <pre><code>{
    id: 1,
    name: "John Doe",
    email: "john@doe.com"
  }
  </code></pre>
  
  <p>along with a <code>users</code> collection</p>
  
  <p>My react code is as follows</p>
  
  <pre><code>var EditableContent = React.createClass({
      getInitialState: function() {
          return {
              editing: false,
              value: this.props.value,
              temp: this.props.value
          };
      },
      editValue: function() {
          this.setState({editing: true})
      },
      valueChanged: function() {
          var newVal = this.refs.text.getDOMNode().value;
          this.setState({temp: newVal});
      },
      valueUpdated: function() {
          var oldVal = this.state.value,
              newVal = this.refs.text.getDOMNode().value;
          this.setState({
              value: newVal,
              editing: false
          });
          if (this.props.onUpdate) this.props.onUpdate(newVal, oldVal);
      },
      abortEdit: function() {
          var oldVal = this.state.value;
          this.setState({
              value: oldVal,
              temp: oldVal,
              editing: false
          });
      },
      render: function() {
          if (this.state.editing) {
              return(
                  &lt;span className={"form-inline"}&gt;
                      &lt;input type="text" className="form-control" ref="text" value={this.state.temp} onChange={this.valueChanged} /&gt;
                      &lt;button className={"btn btn-success"} onClick={this.valueUpdated}&gt;
                          &lt;i className={"fa fa-check"}&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;button className={"btn btn-danger"} onClick={this.abortEdit}&gt;
                          &lt;i className={"fa fa-close"}&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/span&gt;
              );
          } else {
              return (
                  &lt;span&gt;{this.state.value}
                      &lt;button className={"btn btn-warning"} onClick={this.editValue}&gt;
                          &lt;i className={"fa fa-pencil"}&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/span&gt;
              );
          }
      }
  });
  
  var UserRow = React.createClass({
      mixins: [BackboneMixin],
      getBackboneState: function(props) {
          return {
              user: props.user.toJSON()
          };
      },
      watchBackboneProps:function(props, listenTo){
          listenTo(props.user, 'change');
      },
      emailUpdate:function(email) {
          this.props.user.set('email', email, {silent:true});
      },
      render: function() {
          return (
              &lt;tr&gt;
                  &lt;td&gt;{this.state.user.name}&lt;/td&gt;
                  &lt;td&gt;&lt;EditableContent value={this.state.user.email} onUpdate={this.emailUpdate}/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          );
      }
  });
  
  var UserTable = React.createClass({
      mixins: [BackboneMixin],
      getBackboneState: function(props) {
          return {
              users: props.users.toJSON()
          };
      },
      watchBackboneProps:function(props, listenTo) {
          listenTo(props.users, 'add remove change reset');
      },
      componentDidMount: function() {
          /**$.get('/api/users.php'), function(data){
              this.props.users.add(data);
          }.bind(this));**/
          this.props.users.add([
              {
                  "id": 1,
                  "name": "Idona Reese",
                  "email": "vehicula.risus@semperpretiumneque.org"
              },{
                  "id": 2,
                  "name": "Norman Santana",
                  "email": "ut.mi.Duis@Cumsociisnatoque.edu"
              },{
                  "id": 3,
                  "name": "Colt Fulton",
                  "email": "mauris.id@ultrices.edu"
              }
          ]);
      },
      render: function() {
          return (
              &lt;table className={"table"}&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Username&lt;/th&gt;
                          &lt;th&gt;Email&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {this.state.users.map(function(elem){
                          return &lt;UserRow key={elem.id} user={this.props.users.get(elem.id)} /&gt;
                      }, this)}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          )
      }
  });
  
  React.render(&lt;UserTable users={users} /&gt;, document.getElementById('main'))
  </code></pre>
  
  <p>I keep getting <code>Uncaught Error: Listener already exists.</code></p>
  
  <p>I've been able concluded that this due nested components because when I remove the mixin from <code>UserRow</code> and use <code>getInitialState</code> instead everything works fine. </p>
  
  <p>Data from view to model updates correctly but not vice-versa. Any help would be appreciated.</p>
  
  <p>Thanks in advance! </p>