React - to do list (deleting) - query

#1

hi there, i am following a to do list build.

I dont understand why deleteItem is called with item.id and then the function is passed with id argument.

can someone explain this please.

Thanks as always

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newItem: "",
      list: []
    };
  }

  //this is for the onChange (updates state) - everytime the user types something, the updateInput function will run
  //with two inputs (key and value which corresponds to newItem object and the string (which is event.target.value))
  //updateInput then updates the newItem state.
  updateInput(key, value) {
    this.setState({
      [key]: value
    });
  }

  addItem() {
    //create the new item with unique id
    //so a state object itself can be assigned new objects to it
    const newItem = {
      id: 1 + Math.random(),
      value: this.state.newItem
    };

    //copy current list of items
    const list = [...this.state.list];

    //add new item to the list
    list.push(newItem);

    //update state with new list and reset new item
    this.setState({
      list,
      newItem: ""
    });
  }

  deleteItem(id) {
    console.log(id);
    //copy list
    const list = [...this.state.list];

    //filter out deleted object
    //remember that the list (each object) gets assigned a value and id when its added to list
    const updatedList = list.filter(item => item.id !== id);

    //update state
    this.setState({ list: updatedList });
  }

  render() {
    return (
      <div className="App">
        <div>Add an Item</div>
        <br />
        <input
          type="text"
          placeholder="type the item here"
          //once the input is entered, the object will be assigned a value = user's input
          //we also need this value later for the list also
          value={this.state.newItem}
          onChange={e => this.updateInput("newItem", e.target.value)}
        />
        <button onClick={() => this.addItem()}>Add</button>
        <br />
        <ul>
          {this.state.list.map(item => {
            return (
              <li key={item.id}>
                {item.value}
                <button onClick={() => this.deleteItem(item.id)}>X</button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default App;
#2

oh is it because -

  1. the function is called with (item.id), which means it carries the item id across to the function

  2. and then the function is ran/executed with an argument of id (which means it will consider the values of id)

  3. because now deleteItem has the item.id and id arguments, it is able to compare the two. right?

1 Like
#3

Hello, I may not be the best fit to answer your question but I’ll try.

  1. the function is called with (item.id), which means it carries the item id across to the function
  2. and then the function is ran/executed with an argument of id (which means it will consider the values of id)

Yup, this is correct. this.deleteItem(item.id) will pass item.id to the function and it will be referred to as id within the function.

In a way, item.id is id in the context of the deleteItem function body.

  1. because now deleteItem has the item.id and id arguments, it is able to compare the two. right?

Two things we need to be aware of:

  1. The specific id of the item we want to delete from the database. In this case, we pass the id of the item to delete when we call deleteItem(item.id).
  1. The list of items we want to delete an item from. This comes from state.list.

For point 2, look at const list = [...this.state.list]. This means list now refers to the list of items.

And then we want to filter the list so that it’ll remove any item with the id we pass to deleteItem. The confusion probably starts here:

const updatedList = list.filter(item => item.id !== id);

The individual element of list we refer to as item within filter; filter will loop through all elements within the list, access its id with item.id, and compare it with the id passed into deleteItem.

item.id refers to the id of items in list and not the id passed into deleteItem.

If filter finds that there’s an item.id with the same id as the id of item we want to delete, it’ll not return that item. Thus, the new array will have all its original elements except the item removed by filter.

I’m not sure if my verbose explanation helps but hopefully it does.

1 Like
#4