Trying to delete an item from arrays of objects in React

Question

I'm learning React. I'm trying to build a simple todo app on my own to learn & practice with the library. I have passed a list of tasks in the parent component & passed them to the child component as props. I was also able to output it in the child component using the map() method. However, I have no idea how to delete an item. I have tried searching online, but I'm unable to adapt their solutions to my use case.

Parent Component

import React, { Component } from 'react';
import './styles/components/App.css';
import Todos from './components/Todos'

class App extends Component {
  state = {
    todos: [
      { task: 'Study React', id: 1 },
      { task: 'Build something with it',  id: 2 },
      { task: 'Apply for jobs', id: 3 },
    ],
  }
  render(){
    return (
      <div className="App">
          <Todos todos={this.state.todos} />
      </div>
    );
  }
}

export default App;

Child Component

import React, { Component } from 'react';
import '../styles/components/Todos.css'

class Todos extends Component {
    render() {
        let { todos } = this.props;

        let todoList = todos.map(( todo => {
            return (
                <div className="todos" key={todo.id}>
                    <div>{ todo.task }</div>
                </div>
            )
        }));
        return (
            <div onClick={this.deleteTask}>{ todoList }</div>
        )
      
    }
    deleteTask() {
        // checks if method is working
       console.log('working');
       // code to delete 
    }
}

export default Todos

Why don't you try to put the delete event in the App component ? Then use props give Todos component trigger it. — Clark
– Clark, Commented Aug 12, 2019 at 0:55
@GQSM I am a noob in React. I have no idea how to accomplish these solution. Do you mind providing me the answer using my code sample & explainining a bit the solution? — Manuel Abascal
– Manuel Abascal, Commented Aug 12, 2019 at 0:58

Clark · Accepted Answer · 2019-08-12 01:45:18Z

1

Parent Component

import React, { Component } from 'react';
import './styles/components/App.css';
import Todos from './components/Todos'

class App extends Component {
  state = {
    todos: [
      { task: 'Study React', id: 1 },
      { task: 'Build something with it',  id: 2 },
      { task: 'Apply for jobs', id: 3 },
    ],
  };

  // Event and data put in same Component.
  deleteTodo(id) {
    let workTodos = [...this.state.todos];
    const deleteIndex = workTodos.findIndex(todo => todo.id === id);
    workTodos.splice(deleteIndex, 1);
    this.setState({
      todos: [...workTodos]
    })
  }

  render(){
    // Use props give Todos Component the data and events to render dom
    return (
      <div className="App">
          <Todos
            todos={this.state.todos}
            deleteTodo={this.deleteTodo.bind(this)}
          />
      </div>
    );
  }
}

export default App;

Child Component

import React, { Component } from 'react';
import '../styles/components/Todos.css'

class Todos extends Component {
  render() {
    // Receiving events and data form props
    let { todos, deleteTodo } = this.props;

    // Click div trigger deleteTodo, It can execute deleteTodo in App component
    return todos.map(( todo => {
        return (
            <div
              className="todos"
              key={todo.id}
              onClick={() => { deleteTodo(todo.id) }}
            >
                <div>{ todo.task }</div>
            </div>
        )
    })); 
  }
}

export default Todos

Like a commit, put delete event in App component, Then use props trigger it in the Todos component, Please let me know if you have any questions.

edited Aug 12, 2019 at 1:45

answered Aug 12, 2019 at 1:07

Clark

3051 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Manuel Abascal Over a year ago

@CQSM thanks, but it throwing an syntax error in the deleleTodo() method...I removed the const keyword and eliminates that error, but I got workTodo is undefined

Andy Over a year ago

filter is easier than finding the index and then splicing out the object.

Clark Over a year ago

@Andy But deleteEvent expect delete todo item

Clark Over a year ago

@ManuelAbascal Just change worktodo to worktodos ! It is my wrong !

Andy Over a year ago

The problem is with let workTodos = [...this.todos];. It should be let workTodos = [...this.state.todos];.

|

Collectives™ on Stack Overflow

Trying to delete an item from arrays of objects in React

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related