Why doesn't passing the prop work in the following code? - reactjs

Question

I'm learning react and am trying to pass a prop up (I think). The following is my code. When I click 'increment' or 'delete' in the browser, an error message pops up saying 'this.props.onDelete is not a function.' Same with increment; 'this.props.onIncrement is not a function.' Where did I go wrong? Thanks!
App.js
import React, { Component } from "react";
import NavBar from "./components/navbar";
import "./App.css";
import Counters from "./components/counters";
class App extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 },
],
};
render() {
return (
<React.Fragment>
<NavBar />
<main className="container">
<Counters
counters={this.state.counters}
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDelete={this.handleDelete}
/>
</main>
</React.Fragment>
);
}
}
export default App;
counters.js
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
handleIncrement = (counter) => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value++;
this.setState({ counters });
};
handleReset = () => {
const counters = this.state.counters.map((c) => {
c.value = 0;
return c;
});
this.setState({ counters });
};
handleDelete = (counterId) => {
const counters = this.state.counters.filter((c) => c.id !== counterId);
this.setState({ counters });
};
render() {
console.log(this.props);
return (
<div>
<button
onClick={this.props.onReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button>
{this.props.counters.map((counter) => (
<Counter
key={counter.id}
counter={counter}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
></Counter>
))}
</div>
);
}
}
export default Counters;
counter.js
import React, { Component } from "react";
class Counter extends Component {
doHandleIncrement = () => {
this.handleIncrement({ id: 1 });
};
render() {
console.log(this.props);
return (
<div>
{this.props.children}
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-sm"
>
Increment
</button>
<button
onClick={() => this.props.onDelete(this.props.counter.id)}
className="btn btn-danger btn-sm m-2"
>
Delete
</button>
</div>
);
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.props.counter.value === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
const { value } = this.props.counter;
return value === 0 ? "Zero" : value;
}
}
export default Counter;

Answer 1

In App component there are no function defined as handleDelete.
You need to move these function from Counters to App component
handleIncrement = (counter) => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value++;
this.setState({ counters });
};
handleReset = () => {
const counters = this.state.counters.map((c) => {
c.value = 0;
return c;
});
this.setState({ counters });
};
handleDelete = (counterId) => {
const counters = this.state.counters.filter((c) => c.id !== counterId);
this.setState({ counters });
};

Answer 2

These functions are not defined in your App:
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDelete={this.handleDelete}