Deleted All Item When Click On Delete Button And How To Implement The Edit/update Functionality Using React.js

I am new to React.js and I need to implement the delete and update functionality. Here I have done some coding but in case of delete one element, its deleting all from the array list.

Here is my code:

TodoList.js:

import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
class TodoList extends Component {
  constructor(props, context){
    super(props, context);
    this.state={
      items:[]
    }
    this.addItem=this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.editItem = this.editItem.bind(this);
  }
  addItem(e){
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      this.inputElement.value='';
    }
    e.preventDefault();
  }
  deleteItem(key) {
    var filteredItems = this.state.items.filter(function (item) {
      return (item.key !== key);
    });

    this.setState({
      items: filteredItems
    });
  }
  editItem(key){

  }
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form onSubmit={this.addItem}>
            <input ref={(a)=>this.inputElement=a} placeholder="enter task">
            </input>
            <button type="submit">Add</button>
          </form>
        </div>
        <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
      </div>
    );
  }
}

export default TodoList;

TodoItems.js:

import React, { Component } from "react";
class TodoItems extends Component {
  constructor(props, context) {
    super(props, context);

    this.createTasks = this.createTasks.bind(this);

  }
  edit(key){
    this.props.edit(key);
  }
  delete(key){
    this.props.delete(key);
  }
  createTasks(item) {
    return <li key={item.key}>{item.text}<a target="_blank" rel="nofollow noreferrer" href="" className="button bg_green" onClick={()=>this.edit(item.key)}>Edit</a><a target="_blank" rel="nofollow noreferrer" href=""className="button bg_red" onClick={()=>this.delete(item.key)}>Delete</a></li>
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
      <ul className="theList">
          {listItems}
      </ul>
    );
  }
};


export default TodoItems;

My problem is when I am trying to delete any item from the list, All items are removing. Here Also I need to implement the edit and update functionality means once user will click on edit button the respective value will display on the text box and user will change it and save after click on Add button.

Issue is this:

target="_blank" rel="nofollow noreferrer" href=""

Either use target="_blank" rel="nofollow noreferrer" href="#" or target="_blank" rel="nofollow noreferrer" href="javascript:void(0)", or remove the href from a tag. It will work properly.

Working fiddle. (changed only target="_blank" rel="nofollow noreferrer" href="" to target="_blank" rel="nofollow noreferrer" href="#")