Counters jsx file
import React, { Component } from “react”;
import Counter from “./counter”;
class Counters extends Component {
state = {
arrayOfCounters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 },
],
};
render() {
return (
{this.state.arrayOfCounters.map((counter) => (
))}
);
}
}
export default Counters;
Counter jsx file code
import React, { Component } from “react”;
class Counter extends Component {
state = {
count: 0,
};
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
console.log(this.props)
return (
{this.formatCount()}
Increment
);
}
getButtonClass() {
let classes = “btn m-2 btn-”;
return classes += this.state.count === 0 ? “warning” : “primary”;
}
formatCount() {
const { count } = this.state;
return count === 0 ? “zero” : count;
}
}
export default Counter;
On the console instead of getting 4 props i get 8 props :This is what i get on the console :
{value: 4, selected: true}
{value: 4, selected: true}
{value: 0, selected: true}
{value: 0, selected: true}
{value: 0, selected: true}
{value: 0, selected: true}
{value: 0, selected: true}
anyone who can help please help .