ToDoList - No Filter

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<div id="app">

</div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.delete-item {
  color: red;
  margin-left:10px;
}

.delete-item:hover {
  cursor: pointer;
}

Babel + JSX

var TodoListApp = React.createClass({
    addNewElement: function() {
        var value = document.getElementById("value").value;
        var updatedList = this.state.initialItems;
        updatedList.push(value);
        this.setState({initialItems: updatedList});
        document.getElementById("value").value = "";
    },
    deleteElement: function(value) {
        var updatedList = this.state.initialItems;
        var index = updatedList.indexOf(value);
        if (index > -1) {
            updatedList.splice(index, 1);
        }
        this.setState({initialItems: updatedList});
    },
    editElement: function(value, newValue) {
        var updatedList = this.state.initialItems;
        var index = updatedList.indexOf(value);
        updatedList[index] = newValue;
        this.setState({initialItems: updatedList});
    },
    getInitialState: function() {
        var initialItems = ["todo 1"];
        return {
            initialItems: initialItems,
            items: [],
            filter: ""
        }
    },
    componentWillMount: function(){
        this.setState({items: this.state.initialItems})
      },
    render: function() {
        return (<div><h1>Discover ReactJS with {this.props.name}</h1>
            <List items={this.state.items} onDelete={this.deleteElement} onChange={this.editElement}/>
            <br />
            <input id="value" type="text" placeholder="value"/>
            <button type="button" onClick={this.addNewElement}>add</button>
            </div>
        );
    }
});