having trouble seeing increment button in react component - reactjs

Question

I have two componenets , counter and counters. I have a box that shows the value when you click the increment button in my counter component thats not being displayed. I refactored my code so that that my counter component is a controlled component instead of an uncontrolled component so it gets its data from my props object. I will paste the code down below.
Update: I am now able to see the box that has the number of increments but when i click Increment I get Nan displayed in the box for the value.
counter component
import React, { Component } from "react";
class Counter extends Component {
// styles for our bootstrap
styles = {
fontSize: 30,
fontWeight: "bold"
};
render() {
console.log("props", this.props);
return (
<div>
<span className={this.getBadgeColor()}>{this.formatCount()}
</span>
<button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-md"
>
Increment
</button>
<button
onClick={() => this.props.onDelete(this.props.counter.id)}
className="btn btn-danger btn-sm m-2"
>
Delete
</button>
</div>
);
}
getBadgeColor() {
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 ? <h2> Zero </h2> : value;
}
}
export default Counter;
counters component
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 5 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
handleDelete = counterId => {
const counters = this.state.counters.filter(c => c.id !==
counterId);
this.setState({ counters });
};
handleReset = () => {
const counters = this.state.counters.map(c => {
c.value = 0;
return c;
});
this.setState.counters = { counters };
};
handleIncrement = counter => {
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counters };
counters[index].value++;
this.setState({ counters });
};
render() {
return (
<div>
<button
onClick={this.handleReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button>
{this.state.counters.map(counters => (
<Counter
key={counters.id}
onDelete={this.handleDelete}
counter={counters}
onIncrement={this.handleIncrement}
/>
))}
</div>
);
}
}
export default Counters;

Answer 1

you are seeing NaN because in the counters component you should assign values of state .