Editable Item List (React )

by dishap1794

HTML

<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{
  
}

Babel + JSX

const {Component} = React;
const {render} = ReactDOM

const App = React.createClass({
  getInitialState(){
    return({
      todos: [{task: 'Item 1'}],
      editorText: "",
      itemBeingEdited: 2
    })
  },
  textBeingEdited(){
    let store = this.state
    let x = store.todos[store.itemBeingEdited]
    return x ? x.task : ""
  },
  buttonText(){
    let store = this.state
    return store.itemBeingEdited < store.todos.length ? 'Save' : 'Add'
  },
  editorIsEmpty(){
    let store = this.state
    return store.editorText === ""
  },
  onAddItem(){
    let store = this.state
    if (state.itemBeingEdited > state.todos.length){
      console.log("Adding")
      this.setState({
        todos: store.todos.push({task: this.editorText}),
        itemBeingEdited: store.itemBeingEdited + 1,
        editorText: ""
      })
    } else {
      console.log("Saving")
      store.todos[store.itemBeingEdited].tast = store.editorText
      this.setState({
        todos: store.todos,
        editorText: "",
        itemBeingEdited: store.todos.length + 1
      })
    }
	},
  onDeleteItem(i){
    let store = this.state
    store.todos.splice(i, 1)
    if (store.itemBeingEdited === i){
      this.setState({
        itemBeingEdited: store.todos.length + 1,
        editorText: "",
        todos: todos
      })
    }
  },
  onEditItem(i) {
    let store = this.state
    this.setState({
      itemBeingEdited: i,
      editorText: this.textBeingEdited()
    })
  },
  render(){
    let store = this.state
    return(
      <div>
        <TextEditor store={store} />
        <ListGroup store={store} />
      </div>
  	) 
  }
})


const ListItem = (props) => {
  console.log("Rendering ListItem")
  return(
    <li className='list-group-item clearfix constraint'>
      <span className='pull-left'>
        {props.todo.task}
      </span>
      <span className='pull-right'>
        <div className='btn-group'>
          <button className="btn btn-danger btn-xs delete" 
            ...