Reset count function in counter app not setting count to 0 - reactjs

Question

I am facing a problem in resetting the count to 0 in my counter app. It's not resetting the count to 0 for any counter and I have tried console.log each counter.count but it's showing undefined.
App.js:
import React from "react";
import "./App.css";
import Counter from "./components/Counter";
export class App extends React.Component {
state = {
counters: []
};
addCounter = () => {
this.setState({
counters: [...this.state.counters, Counter]
});
};
reset = () => {
const counters = this.state.counters.map(counter => {
counter.count = 0;
return counter;
});
// console.log(counters.count);
this.setState({ counters });
};
render() {
return (
<div className="App">
<button onClick={this.reset}>Reset</button>
<button onClick={this.addCounter}>Add Counter</button>
{this.state.counters.map((Counter, index) => (
<Counter key={index} />
))}
</div>
);
}
}
export default App;
Counter.js:
import React, { Component } from 'react'
export class Counter extends Component {
state={
count:0,
}
increment=()=>{
this.setState({ count: this.state.count + 1 });
}
decrement=()=>{
this.setState({ count: this.state.count - 1 });
}
render() {
return (
<div>
<span><button onClick={this.increment}>+</button></span>
<span>{this.state.count}</span>
<span><button onClick={this.decrement}>-</button></span>
</div>
)
}
}
export default Counter
Reset counter should reset the count to 0 for all the counters.

Answer 1

When you use
this.setState({
counters: [...this.state.counters, Counter]
});
you saved a React Class into counters. So when you map to reset to 0, you need New Class to get state.count like this:
reset = () => {
const counters = this.state.counters.map(counter => {
(new counter()).state.count = 0;
return counter;
});
for (let counter of counters) {
console.log((new counter()).state);
}
this.setState({ counters });
};

Answer 2

It's time to lift the state up.
Move all your increment and decrement and reset functions to parent, App.
Also, add a separate array count state to monitor current count for each counter.
// App
export class App extends React.Component {
state = {
counters: [],
count: [] // additional state to store count for each counter
};
addCounter = () => {
this.setState({
counters: [...this.state.counters, Counter],
count: [...this.state.count, 0]
});
};
reset = () => {
this.setState({
count: this.state.count.map(c => 0)
});
};
// lifted up from Counter
increment = index => {
this.setState({
count: this.state.count.map((c, i) => (i === index ? c + 1 : c))
});
};
// lifted up from Counter
decrement = index => {
this.setState({
count: this.state.count.map((c, i) => (i === index ? c - 1 : c))
});
};
render() {
return (
<div className="App">
<button onClick={this.addCounter}>Add Counter</button>
<button onClick={this.reset}>Reset</button>
{this.state.counters.map((Counter, index) => (
<Counter
key={index}
increment={() => this.increment(index)}
decrement={() => this.decrement(index)}
count={this.state.count[index]}
/>
))}
</div>
);
}
}
// Counter
export class Counter extends React.Component {
render() {
return (
<div>
<span>
<button onClick={this.props.increment}>+</button>
</span>
<span>{this.props.count}</span>
<span>
<button onClick={this.props.decrement}>-</button>
</span>
</div>
);
}
}
Demo