Delete mapped element by click React

Question

In my state I have an array, which I mapped in render function:

State

this.state = {
        newItem: {
            name: "",
            amount: 0
        },
        products: [
            {
                name: "Item",
                amount: 5
            },
            {
                name: "Item",
                amount: 5
            },
            {
                name: "Item",
                amount: 5
            }
        ]
    }

I want to delete element from the array products by clicking in button of that element. But what I attempted to do, everything fails. I searched a lot and find logically the most common solution but it didn't work too. Here is the delete function:

Delete function

delete(e) {
  this.setState(prevState => ({ products: prevState.products.filter((product) => {
      return product !== e.target.value
  })}))
  console.table(this.state.products)
}

Mapped JSX code

            {
                this.state.products.map((item, index) => {
                    return(
                        <div key={index}>
                            <input readOnly value={this.state.products[index].name} type="text" />
                            <button disabled>-</button>
                            <input readOnly value={this.state.products[index].amount} type="number" />
                            <button disabled>+</button>
                            <button onClick={(e) => this.delete(e)}>Delete</button>
                        </div>
                    )
                })
            }

Maybe [this answer](https://stackoverflow.com/a/57969736/1641941) can help you out. — HMR, Sep 21 '19 at 18:45

Diamond · Accepted Answer · 2019-09-22T12:41:04.477

2

You need to pass index of that element into delete which will be removed like below.

<button onClick={() => delete(index)}>Delete</button>

Then you can remove that element easily.

delete = index => {
  this.setState(prevState => 
    ({
        products: prevState.products.filter((product, i) => i !== index)
    })
  );
}

edited Sep 22 '19 at 12:41

answered Sep 21 '19 at 19:09

Diamond

3,470
2
19
39

`splice` actually modifies the array, I would prefer using `filter` method – Olivier Boissé Sep 21 '19 at 20:14
@Antonio delete one parenthesis like this : ` products: prevState.products.filter((product, i) => i !== index)` like works only like this – Robert Hovhannisyan Sep 22 '19 at 08:04

score 1 · Answer 2 · edited Sep 22 '19 at 12:42

1

A simplified example of how to make item specific buttons on a mapped list:

delete = (id) => {
  this.setState(products: this.state.products.filter((item, index) => index !== idx));
}

edited Sep 22 '19 at 12:42

Robert Hovhannisyan

2,938
6
21
43

answered Sep 21 '19 at 18:06

ManavM

2,918
2
20
33

Your algorithm of delete function is right, but in this case, I need exactly the code what I wrote in the edit, thank you. – Robert Hovhannisyan Sep 22 '19 at 08:39

Olivier Boissé · Answer 3 · 2019-09-21T20:21:44.310

Note that setState is asynchronous, so using console.log(this.state.products) immediately after calling setState will not print the updated products. You can pass a callback in the second parameter of setState, it will be executed once setState is completed.

The other problem comes from the delete function. You are using e.target.value which is an empty string because the button has no value.

You can fix this with the following code :

delete(product) {
  this.setState(prevState => ({
    products: prevState.products.filter(p => p !== product)
  }), 
  () => console.log(this.state.products));
}

In the JSX code, I pass the product in the first argument of the delete function :

{
  this.state.products.map((product, index) => (
    <div key={index}>
      <input readOnly value={product.name} type="text"/>
      <button disabled>-</button>
      <input readOnly value={product.amount} type="number"/>
      <button disabled>+</button>
      <button onClick={() => this.delete(product)}>Delete</button>
    </div>
  ))
}

Sorry, but it doesn't work. It just doing nothing when I click — Robert Hovhannisyan, Sep 22 '19 at 08:09
But whatever, I find the right answer and you gave me good advice, it at least deserves an upvote. Thank you! — Robert Hovhannisyan, Sep 22 '19 at 08:12

Maktum Mallat · Answer 4 · 2019-09-21T18:52:53.520

here is the solution and working example here https://codesandbox.io/s/dawn-tdd-js8yz

state = {
    newItem: {
        name: "",
        amount: 0
    },
    products: [
        {
            name: "Item1",
            amount: 5
        },
        {
            name: "Item2",
            amount: 5
        },
        {
            name: "Item3",
            amount: 5
        }
    ]
}

  delete(e: any) {
    
    var products = this.state.products.filter((product) => {
      return product.name !== e.name
    });

    console.log(products)

    this.setState({products: products})
    console.table(this.state.products)
  }

  render() {
    const { products } = this.state;
    return (
      <>
      {products.map((x, index) => {
        return <div key={index}>
        <input readOnly value={this.state.products[index].name} type="text" />
        <button disabled>-</button>
        <input readOnly value={this.state.products[index].amount} type="number" />
        <button disabled>+</button>
        <button onClick={this.delete.bind(this, x)}>Delete</button>
    </div>
      })}
      </>
    )
  }

It is to complex, but anyway it works, it deserves at least an upvote. Thank You! — Robert Hovhannisyan, Sep 22 '19 at 08:05

Delete mapped element by click React

4 Answers4