Editable Item List (React + Mobx)

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}
.list-group-item{
  border-radius: 0px !important;
}
.form-control{
  border-radius: 0px !important;
}
.constraint .edit, 
.constraint .delete{
  visibility: hidden;
}

.constraint:hover .edit, 
.constraint:hover .delete{
  visibility: visible;
}
.constraint{
  
}

.constraint.being-edited{
  border-left: solid 4px darkgreen;
}
.editor textarea{
  height: 37px;
}
.editorApp .list-group-item{
  font-family: Consolas;
}

Babel + JSX

const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM

class Store {
  @observable todos = []
  @observable editorText = ""
  @observable itemBeingEdited = 1
  @computed get textBeingEdited(){
    let x = this.todos[this.itemBeingEdited]
    return x ? x.task : ""
  }
  @computed get buttonText(){
    return this.itemBeingEdited < this.todos.length ? 'save' : 'plus'
  }
  @computed get editorIsEmpty(){
    return this.editorText === ""
  }
  onAddItem(){
    if (this.itemBeingEdited > this.todos.length){
      console.log("Adding")
      this.todos.push({task: this.editorText})
      this.itemBeingEdited += 1
      this.editorText = ""
    } else {
      console.log("Saving")
      this.todos[this.itemBeingEdited].task = this.editorText
      this.editorText = ""
      this.itemBeingEdited = this.todos.length + 1
    }
  }
  onDeleteItem(i){
    if (this.itemBeingEdited === i){
      this.itemBeingEdited = this.todos.length + 1
      this.editorText = ""
    }
    this.todos.splice(i, 1)
  }
  onEditItem(i) {
    this.itemBeingEdited = i
    this.editorText = this.textBeingEdited
  }
}

const ListItem = observer((props) => {
  console.log("Rendering ListItem")
  let beingEdited = props.isBeingEdited ? ' being-edited' : ""
  return(
    <li 
      className={'list-group-item clearfix constraint' + beingEdited}
      onDoubleClick={props.editItem}
    >
      <span className='pull-left'>
        {props.todo.task}
      </span>
      <span className='pull-right'>
        <div className='btn-group'>
          <button className="btn btn-danger btn-xs delete" 
             onClick={props.deleteItem}>
            x
          </button>
          <button className="btn btn-success btn-xs edit" 
             onClick={props.editItem}>
            -
          </button>
        </div>
      </span>
    </li>
  )
})

const ListGroup = observer(({store}) => {
  console.log("Rendering...