# Delete Button not working

**URL:** <https://forum.codewithmosh.com/t/delete-button-not-working/663>\
**Category:** React\
**Created:** [November 12, 2020, 7:56pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663 "2020-11-12T19:56:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![pfabbi](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfabbi](https://forum.codewithmosh.com/u/pfabbi)\
**Post date:** [November 12, 2020, 7:56pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/1 "2020-11-12T19:56:45Z")

</div>

8- Updating the State

When I click the Delete button on the counter app, the message I get on the Console is “Event Handler Called” undefined, when I should be getting “Event Handler Called” 1, then “Event Handler Called” 2, “Event Handler Called” 3 and so on.

I am using:

handleDelete = (counterId) =\> {  
console.log(“Event Handler Called”, counterId);  
};

as instructed, but for some reason my counterId won’t show on the console.

What am I doing wrong?

Thanks,

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [November 12, 2020, 8:29pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/2 "2020-11-12T20:29:29Z")

</div>

Since `counterId` seems to be undefined it’s likely that it’s not passed correctly. Check the button’s `onClick`-Event.

---

<div class="post-metadata">

**Author:** ![pfabbi](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfabbi](https://forum.codewithmosh.com/u/pfabbi)\
**Post date:** [November 12, 2020, 9:24pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/3 "2020-11-12T21:24:46Z")

</div>

Hey SAM,

it had nothing to do with my onClick Event. It turns out I was missing the id={counter.id}  
in my Counter class. But now my U.I. isn’t correct. I have the id numbers showing which I shouldn’t.  
 ![Capture](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/1X/9f85f1ce685a2a2d957e566136481033b28b71ad.png)

---

<div class="post-metadata">

**Author:** ![pfabbi](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@pfabbi](https://forum.codewithmosh.com/u/pfabbi)\
**Post date:** [November 12, 2020, 9:33pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/4 "2020-11-12T21:33:01Z")

</div>

Nevermind I figured out what was wrong. I forgot to delete the id header HTML element in the counter.jsx file 🤦‍♂️

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [November 12, 2020, 9:41pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/5 "2020-11-12T21:41:54Z")

</div>

Good that you found the bugs yourself. We can only guess if you don’t share the relevant parts of your code.

---

<div class="post-metadata">

**Author:** ![umarabdullahmansoori](https://avatars.discourse-cdn.com/v4/letter/u/51bf81/32.png) [@umarabdullahmansoori](https://forum.codewithmosh.com/u/umarabdullahmansoori)\
**Post date:** [May 22, 2021, 5:03pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/6 "2021-05-22T17:03:51Z")

</div>

I do not understand… can you tell in detail? facing same error

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [May 23, 2021, 4:54pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/7 "2021-05-23T16:54:59Z")

</div>

> [@pfabbi](#):
>
> “Event Handler Called” undefined

Which error are you facing? ‘“Event Handler Called” undefined’? Or something else? Could you post your code?

---

<div class="post-metadata">

**Author:** ![ars8](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@ars8](https://forum.codewithmosh.com/u/ars8)\
**Post date:** [June 28, 2021, 1:37am UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/8 "2021-06-28T01:37:02Z")

</div>

Even iam facing the same error…“Undefined”  
could you pls help me in solving this error

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.codewithmosh.com/u/rob)\
**Post date:** [July 1, 2021, 2:33am UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/9 "2021-07-01T02:33:54Z")

</div>

@ars8 can you post the code to your counter class?

---

<div class="post-metadata">

**Author:** ![alterro](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@alterro](https://forum.codewithmosh.com/u/alterro)\
**Post date:** [July 25, 2021, 10:22am UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/10 "2021-07-25T10:22:31Z")

</div>

Inside counters.jsx

```auto
      <div>
        {this.state.counters.map((c) => (
          <Counter
            key={c.id}
            id={c.id}
            onDelete={this.handleDelete}
            value={c.value}
          />
        ))}
      </div>

```

---

<div class="post-metadata">

**Author:** ![umekalu](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/umekalu/32/2706_2.png) [@umekalu](https://forum.codewithmosh.com/u/umekalu)\
**Post date:** [February 12, 2022, 12:39pm UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/11 "2022-02-12T12:39:44Z")

</div>

Thanks, this really saved my day. I actually missed it, and was wondering what I’m doing wrongly.

---

<div class="post-metadata">

**Author:** ![Yash\_hp10](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yash\_hp10](https://forum.codewithmosh.com/u/Yash_hp10)\
**Post date:** [June 8, 2022, 11:46am UTC](https://forum.codewithmosh.com/t/delete-button-not-working/663/12 "2022-06-08T11:46:10Z")

</div>

i am facing some problems tooo.  
i have tried everything but i couldnt get any result…  
when i click delete button nothing hapeened, but when I write console.log(“event handler called”, counter) then it works perfectly…only delete button not working please someone help me…

counter.jsx -

render() {  
return (

  
{this.formatCount()}  
Increment  
\<button onClick={() =\> this.props.onDelete(this.props.id)} \>Delete  

  
);  
}  
}

counters.jsx -

state = {  
counters : [  
{id: 1, value: 4},  
{id: 2, value: 0},  
{id: 3, value: 0},  
{id: 4, value: 0},  
]  
}

```
 handleDelete = (counter) => {
    const counters = this.state.counters.filter(c => c !== counter)
    this.setState=({
        counters: counters
    })
    console.log("Event handler called", counter)
 };

render() { 
    return (
        <div>
            {this.state.counters.map(c => 
            <Counter 
            key={c.id}
            value={c.value}
            id={c.id}
            onDelete={this.handleDelete}
            />)}
        </div>
    );
}

```

}