Delete Button not working

React
1

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,

2

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

3

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

4

Nevermind I figured out what was wrong. I forgot to delete the id header HTML element in the counter.jsx file :man_facepalming:

2 Likes
5

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

6

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

7

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

8

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

9

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

10

Inside counters.jsx

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

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

1 Like
12

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>
    );
}

}