Cannot delete Item from Todo-list in React

remove item from todo list react
react remove item from list
react remove item from array
react remove item from object
react remove element onclick
react delete button
react remove element from dom
react delete component

I have created a simple Todo list, adding item works but when I clicked on the 'delete' button, my Item is not deleting any item from the List. I would like to know what mistakes I am making in my code, Would appreciate all the help I could get. Thanks in Advance! And ofcourse, I have tried Looking through google and Youtube, But just couldnot find the answer I am looking for.



import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import TodoForm from "./TodoForm";
import Title from "./Title";

class App extends React.Component {
 // myRef = React.createRef();

  render() {
    return (
      <div className="App">
        <Title />
        <TodoForm />


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


import React from "react";
import ListItems from "./ListItems";

class TodoForm extends React.Component {
  constructor(props) {
    this.state = {
      value: "",
      items: [],
      id: 0

  inputValue = e => {
    this.setState({ value: });

  onSubmit = e => {
      value: "",
      id: 0,
      items: [...this.state.items, this.state.value]

  deleteItem = (itemTobeDeleted, index) => {
    console.log("itemTobeDeleted:", itemTobeDeleted);
    const filteredItem = this.state.items.filter(item => {
      return item !== itemTobeDeleted;
      items: filteredItem

  // remove = () => {
  //   console.log("removed me");
  // };

  render() {
    // console.log(this.deleteItem);
    return (
        <form onSubmit={this.onSubmit}>
            placeholder="Enter task"

          <button>Add Item</button>

        <ListItems items={this.state.items} delete={() => this.deleteItem} />

export default TodoForm;


import React from "react";

const ListItems = props => (
      {, index) => {
        return (
          <li key={index}>
            {" "}
            <button onClick={props.delete(item)}>Delete</button>

export default ListItems;

The problem is, you must pass a function to the onDelete, but you are directly calling the function

updating the delete item like so,

deleteItem = (itemTobeDeleted, index) => (event) => {

and update this line, (since the itemTobeDeleted was not reaching back to the method)

 <ListItems items={this.state.items} delete={(item) => this.deleteItem(item)} />

fixes the issue

Working sandbox :

How To Delete An Item From An Array In React – Vegibit, In this react tutorial we'll review a few things and then look at how to delete an item from an array. The number of TypeError: Cannot assign to read only property 'value' of object '#<Object>'. So props is However the state which holds the list of <Item/>'s on the page is in the component. Therefore How do we do that? In this react tutorial we’ll review a few things and then look at how to delete an item from an array. The number of items in the array determines how many item components are displayed on the page. We want to be able to click a button on a specific item, and have React automatically remove it from the page.

Here is the working example:

You have to pass in the function into ListItems and in ListItems run it passing in the correct argument (the item).

Remove an Item from a List in React, It's a common task in React to remove an item from a list. We will start with a typical list in React where we provide a stable key attribute for function, because it cannot operate solely on the list anymore, but needs to take  The way this Todo List app works is pretty simple. Type in a task or item or whatever you want into the input field and press Add (or hit Enter/Return). Once you've submitted your item, you will see it appear as an entry. You can keep adding item to add additional entries and have them all show up: To remove an item, just click on an existing

Your solution is close; there are two fixes needed for your app to work as expected.

First, when rendering the ListItems component, ensure that the item is passed through to your deleteItem() function:

<ListItems items={this.state.items} delete={(item) => this.deleteItem(item)} />

Next, your ListItems component needs to be updated so that the delete callback prop is called after an onclick is invoked by a user (rather than immediatly during rendering of that component). This can be fixed by doing the following:

{, index) => { 
    return (<li key={index}>{item}
        onClick is specified via inline callback arrow function, and 
        current item is passed to the delete callback prop 
        <button onClick={() => props.delete(item)}>Delete</button>

Here's a working version of your code sandbox

React - to do list (deleting) - query - Curriculum Help, hi there, i am following a to do list build. I dont understand why deleteItem is called with and then the function is passed with id  Once Create React App has finished building your project, open the todo-app folder in your favorite IDE or editor. We’re given one React component inside of a new Create React App project, App.js. Feel free to rename it. However, I’m going to keep the name as we’re only going to use one component. Write the HTML and CSS Styles

Deleting To-Do List Items, delete items from local storage and to-do lists. move an ID to a parent element. We've made a lot of progress with the To-Do List application, but  Also, be sure to remove the React 16.6 dependencies and add React 16.7. Styling Your Application Jump into your src/App.css file and add in the three classes we will be using throughout our app. Styling won't be the focus of this app, so we'll keep this short and sweet.

Building an Awesome Todo List App in React, thanks! cannot see what is going wrong here! 1 reply · Jan '18 · joe​241. Hi all,. I struggled with the deleteItem method for  React is a front-end JavaScript library that can be used to create interactive user interfaces for your application. In this tutorial, you will create a to-do app that covers all four aspects of a CRUD: Create, Read, Update, and Delete.

Simple Redux Create Delete Contact Application, npm install -g create-react-app create-react-app redux-contact-app. It will make some Now, if we need to change the add the new contact in the array of contacts or modify it, we do not do it directly. We need to Now, add a new case in the contactReducer.js file to delete the contact. We were unable to load Disqus. When you create the app it will generate a new folder with whatever name you used. You can simply delete the folder. If you mean how do I delete create-react-app