CODEWITHSUNDEEP
javascriptreactjs
martin
martin

Reputation: 885

Can't find the ID in react prop

It's my first day learning react and I'm stuck with an issue (I'm following Mosh's tutorial):

import React, { Component } from "react";

class Counter extends Component {
  state = {
    value: this.props.value,
  };
  handleIncrement = () => {
    console.log("Click!");
    this.setState({ value: this.state.value + 1 });
  };
  handleDecrement = () => {
    console.log("Click!");
    if (this.state.value !== 0) {
      this.setState({ value: this.state.value - 1 });
    }
  };
  render() {
    return (
      <div className="row align-items-center">
        <div className="col">
          <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        </div>
        <div className="col">
          <button
            onClick={() => this.handleIncrement({ id: 1 })}
            className="btn btn-dark"
          >
            +
          </button>
          <button
            onClick={() => this.handleDecrement({ id: 1 })}
            className={this.isLessThanZero()}
          >
            -
          </button>
        </div>
        <div className="col">
          <button
            onClick={() => this.props.onDelete(this.props.id)}
            className="btn btn-danger m-2"
          >
            Delete
          </button>
        </div>
      </div>
    );
  }
  isLessThanZero() {
    let classes = "btn btn-dark ";
    classes += this.state.value === 0 ? "disabled" : "";
    return classes;
  }
  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.value === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    let { value } = this.state;
    return value === 0 ? <h1>Zero</h1> : value;
  }
}

export default Counter;

This is a counter component that just responds to the buttons. I'm including those in another component:

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 },
    ],
  };
  handleDelete = (counterId) => {
    console.log("Event detected! Delete", counterId);
  };
  render() {
    return (
      <div className="cont">
        {this.state.counters.map((counter) => (
          <Counter
            value={counter.value}
            key={counter.id}
            onDelete={this.handleDelete}
          ></Counter>
        ))}
      </div>
    );
  }
}

export default Counters;

In the handleDelete function, when called, I'm getting undefined for the counterId. When I check in the ReactComponents Chrome extention, I see that there isn't any ID:

enter image description here

Why is this happening?

Upvotes: 0

Views: 785

Answers (1)

Ashish
Ashish

Reputation: 4330

The problem is you are not passing the counter for this.handleDelete. You need to explicitly pass it.

       <Counter
            value={counter.value}
            key={counter.id}
            onDelete={() => this.handleDelete(counter.id)}
       />

In the above snippet, I am passing a new function to the Counter component, the function just calls this.handleDelete with the counter.id of the corresponding component.

Upvotes: 1

Related Questions