ToDoList - With 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>
<script src="https://fb.me/react-dom-0.14.0.min.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({
    filterChange: function(event){
        var updatedList = this.state.initialItems;
        var filter = event.target.value.toLowerCase();
        updatedList = updatedList.filter(function(item){
              return item.toLowerCase().search(
                filter) !== -1;
        });
        this.setState({items: updatedList, filter: filter});
  },
  filterList: function(){
        var updatedList = this.state.initialItems;
        var filter = this.state.filter;
        updatedList = updatedList.filter(function(item){
              return item.toLowerCase().search(
                filter) !== -1;
        });
        this.setState({items: updatedList});
  },
    addNewElement: function() {
        var value = document.getElementById("value").value;
        var updatedList = this.state.initialItems;
        updatedList.push(value);
        this.setState({initialItems: updatedList});
        document.getElementById("value").value = "";
        this.filterList();
    },
    deleteElement: function(value) {
        var updatedList = this.state.initialItems;
        var index = updatedList.indexOf(value);
        if (index > -1) {
            updatedList.splice(index, 1);
        }
        this.setState({initialItems: updatedList});
        this.filterList();
    },
    editElement: function(value, newValue) {
        var updatedList = this.state.initialItems;
        var index = updatedList.indexOf(value);
        updatedList[index] = newValue;
        this.setState({initialItems: updatedList});
        this.filterList();
    },
    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>
           ...