CODEWITHSUNDEEP
javascriptarraysreactjscomponentsjavascript-objects
Manuel Abascal
Manuel Abascal

Reputation: 6312

Trying to delete an item from arrays of objects in React

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

Upvotes: 0

Views: 68

Answers (1)

Clark
Clark

Reputation: 305

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.

Upvotes: 1

Related Questions