Dynamically removing from array

1

Hello everyone, this is my last issue with a 3 month long project. (I am really appreciative of FCC)
I am trying to have the item that is clicked removed from the cart array.
The issue is writing that function.
I had no problem writing the add to cart function

addToCart(e) {
    this.setState({
      cart: [...this.state.cart, [e.target.value, e.target.name, e.target.id]],
    });
    e.target.classList.add("btn-success");
    e.target.classList.remove("button");
    e.target.innerHTML = "Added to cart";
  }

But when it comes to writing a function that will remove one of these items, I am a little stumped.
You can view my whole code here:


I used prettier this time.
Thank you in advance for your help.

2
3

Thanks for your reply! I found that when googling. If it was just a simple array I would be able to remove an item from it. The issue is removing the specific part of the array that is the clicked item.

4

Something like indexOf(e.target.value) might help?

5

Indexof is used to find where in the array the index is, right? Can it also be used to find the item and delete it?
I’ve never used it before, so forgive the ignorance.

6

indexOf() finds the index value for the element.

let array = [a, 2, z]
array.indexOf(2) //returns 1
7

Sorry for the delayed response, but how would the index be able to help remove the item? I tried this before and it just returned a 1 or a 2

8

You want the item that is clicked to be removed from the cart, right?
So I click the item. The code uses indexOf() to find where that item is in the array, and then can splice() the array at that index to remove the item. Right?

9

You’re right, that was right in front of me but I didn’t see it.
Thanks for your help!

1 Like
10

I think the problem is a little above my level though. when I tried to

console.log(this.state.cart.indexOf(e.target.value))

it returns undefined. I’m not sure if this is because of the cart array being in state or not.
#2

 if (this.props.cart.length !== 0) {
      var cartitems = this.props.cart.map(function (cartitems) {
        return (
          <div
            className="col-sm-12  cartitem"
            key={cartitems[1]}
            id={cartitems[1]}
          >
            <img
              src={cartitems[2]}
              id={cartitems[2]}
              alt={cartitems[1]}
              className="cart-image"

The item that I want to have clickable is being dynamically rendered, so will the indexOf() method still work?

11

  1. You should generate a unique id for each product, use something like the uuid package.

  2. Pass the id to the Removefromcart method and filter the state using the id.

  3. You should really make the cart an array of objects, not an array of arrays. That way you can reference each property by name and not by index. Instead of passing the event to addCart and constructing the state from it, pass the serviceitems object and get the properties that you already have from the JSON data. Just like you are doing in the Services component.

  4. Don’t use the DOM content to do price calculations, use the state. Do it in app.js. Using an updater function it is much easier to calculate the total then what you are doing.

I made some changes to the code and added some comments.

If you have any questions just ask, but I may not get to it today (tonight for me).

1 Like
12

I assume you’re on the east coast, all I can say is goodnight and thank you very much!
I will study this code religiously. It’s miles ahead of where I am at.