React mystery: When key is needed.

gistfile1.js

var React  = require('react/addons');
var marked = require('marked');

var EditableTextArea = React.createClass({

  propTypes: {
    contentBody: React.PropTypes.string.isRequired,
    onSave: React.PropTypes.func
  },


  getDefaultProps: function () {

  },


  getInitialState: function () {

    return ({
      isEditing: false,
      content: this.props.contentBody
    });
  },


  componentDidMount: function () {
    console.log('component did mount');
    this.showContent();
  },


  componentDidUpdate: function () {
    if (!this.state.isEditing) {
      console.log('component did update');
      this.showContent();
    }
  },


  componentWillReceiveProps: function (newProps) {
    console.log('component will receive props');
    var content = $(this.refs.content.getDOMNode());
    if (this.state.content) {
      content.html(marked(newProps.content));
    }
  },

  showContent: function() {

    if (!this.state.isEditing) {
      console.log('-+++++++++++++++show content+++');
      if (this.state.content) {
        this.showContentText();
      }
      else {
        this.showContentPlaceholder();
      }
    }
  },

  showContentText: function() {
    var content = $(this.refs.content.getDOMNode());
    console.log('--show content text', content);
    var date = new Date();
    //content.html(marked(this.state.content));
    content.html('dsfsfdsfdss' + date);
    content.removeClass('--placeholder');
  },

  showContentPlaceholder: function() {
    var content = $(this.refs.content.getDOMNode());
    console.log('---show content placeholder');
    content.html('Add a description ..');
    content.addClass(' --placeholder');
  },

  editContent: function() {
    console.log('----edit content---');
    var _t = this;
    this.setState({
      isEditing: true
    }, function() {
      var contentTextArea =
        $(this.refs.contentTextArea.getDOMNode());
      contentTextArea.val(this.state.content);
      contentTextArea.focus();
      _t.focusContent();
    });
  },

  saveDescription: function(e) {
    e.preventDefault();

    var _t = this;

    var contentTextArea =
      $(this.refs.contentTextArea.getDOMNode());

    var description = contentTextArea.val();

    this.setState({
      isEditing: false
    }, function() {

      console.log('---------save');
      if (this.state.onSave()) {
        TaskStore.actions.setDescription(_t.props.task._id, description);
      }
    });
  },

  cancelDescriptionEdit: function() {
    this.setState({isEditing: false});
  },

  focusContent: function() {
    var contentAreaContainer =
      $(this.refs.contentAreaContainer.getDOMNode());
    contentAreaContainer.addClass(' --focus');
  },

  render: function() {
    console.log('----render---');
    var component;
    if (this.state.isEditing) {
      console.log('-------editing-------');
      component = (
        <div className='tw-task-description-textarea'
          ref='contentTextAreaContainer' key='editing'>
            <textarea className='form-control'
              ref='contentTextArea'
              onFocus={this.focusContent}
              rows='6' />
            <div className='tw-task-description-controls'>
              <div className='uk-button --weak'
                onClick={this.cancelDescriptionEdit} >
                  Cancel
              </div>
              <div className='uk-button'
                onClick={this.saveDescription}>
                  Save
              </div>
            </div>
        </div>
      );

    }
    else {
      component = (
        <div className='tw-task-description' ref='content'
          onClick={this.editContent} key='showing'>
        </div>
      );
    }

    return (
      <div className='tw-task-description-wrapper'>
        {component}
      </div>
    );
  }
});

module.exports = EditableTextArea;