title: Syncing state between React app and Firebase database
body: <p>I'm new to React and I'm following an online tutorial. I've developed the code below as part of a Todo App. It is the logic for removing an existing todo item (object) from the state. The state is in the following format:</p>
  
  <pre><code>todos: {todo1: 'Throw the keyboard out of the window',
          todo2: 'Go and buy a new keyboard'}
  </code></pre>
  
  <p>...and here is the key code from my app: </p>
  
  <pre><code>var TodoApp = React.createClass({
    getInitialState: function() {
      return {
        todos: {}
      };
    },
    removeTodo: function(key) {
      var todosCopy = Object.assign({}, this.state.todos);
      delete todosCopy[key];
  
      this.setState({
        todos: {...todosCopy}
      });
    }  
  }  
  </code></pre>
  
  <p>The above gets the job done and the selected todo is indeed removed when the <code>removeTodo</code> method is invoked.</p>
  
  <p>The problem appears when the instructor links the app with the Firebase database via the <a href="https://github.com/tylermcginnis/re-base" rel="nofollow">npm re-base library</a> so that if the user has already used the app, the <code>todos</code> state will be pre-populated.</p>
  
  <p>He does it by adding the following method to the <code>TodoApp</code>:</p>
  
  <pre><code>componentDidMount: function() {
    var base = Rebase.createClass('https://example-com.firebaseio.com/');
    base.syncState('todos', {
      context: this,
      state: 'todos',
    });
  </code></pre>
  
  <p>As soon as the above is added, my <code>removeTodo</code> method stops updating the state. But the instructor actually gets his app to work with his own version of the <code>removeTodo</code> method below:</p>
  
  <pre><code>removeTodo : function(key) {
    this.state.todos[key] = null;
    this.setState({
      todos : this.state.todos
    });
  },
  </code></pre>
  
  <p>I don't think that he is following the best practice since we should not be mutating the state according to the <a href="https://facebook.github.io/react/docs/component-api.html" rel="nofollow">React docs</a>. I would prefer to avoid this. So my questions are:</p>
  
  <ol>
  <li>Why is his version of the <code>removeTodo</code> working and mine is not?</li>
  <li>What can I do to make it work?</li>
  </ol>