Using one react state for multiple components - reactjs

Question

I have a simple counter that I render an Items component that gets props and state as props. I want multiple renders of that same component to use just one counter state instead of counter1 counter2 etc...
Also I want to have just increase and decrease function instead of multiple. Hope the code explains what im trying to say. Is there anyway to do this?
import React from "react";
import Navbar from "./NavBar";
import Items from "./Items";
import "./App.css";
class App extends React.Component {
constructor(props) {
super();
this.state = {
counter1: 0,
counter2: 0,
counter3: 0,
};
}
render() {
//Counter 1
const Increase1 = () => {
this.setState({ counter1: this.state.counter1 + 1 });
};
const Decrease1 = () => {
if (this.state.counter > 0) {
this.setState({ counter1: this.state.counter1 - 1 });
}
};
//Counter 2
const Increase2 = () => {
this.setState({ counter2: this.state.counter2 + 1 });
};
const Decrease2 = () => {
if (this.state.counter > 0) {
this.setState({ counter2: this.state.counter2 - 1 });
}
};
//Counter 3
const Increase3 = () => {
this.setState({ counter3: this.state.counter3 + 1 });
};
const Decrease3 = () => {
if (this.state.counter > 0) {
this.setState({ counter3: this.state.counter3 - 1 });
}
};
return (
<div>
<Navbar />
<div className="container mt-4">
<button className="btn btn-primary mr-4">Redo</button>
<button
className="btn btn-secondary"
onClick={() => window.location.reload()}
>
Reload
</button>
<Items
amount={this.state.counter1}
increase={Increase1}
decrease={Decrease1}
/>
<Items
amount={this.state.counter2}
increase={Increase2}
decrease={Decrease2}
/>
<Items
amount={this.state.counter3}
increase={Increase3}
decrease={Decrease3}
/>
</div>
</div>
);
}
}
export default App;
And here is the Items Component
import React from "react";
function Items(props) {
console.log(props);
return (
<div>
<h6 className="mt-3">{props.amount}</h6>
<button className="btn btn-success mr-3" onClick={props.increase}>
+
</button>
<button className="btn btn-info mr-3" onClick={props.decrease}>
-
</button>
<button className="btn btn-danger mr-3">Delete</button>
</div>
);
}
export default Items;
Sorry for the confusing code it was weird to get into a code block

Answer 1

About the idea you can use only one increase and decrease function for multiple Items by specific a key for each Item
import React from 'react';
import Navbar from './NavBar';
import Items from './Items';
import './App.css';
class App extends React.Component {
constructor(props) {
super();
this.state = {
counter1: 0,
counter2: 0,
counter3: 0,
};
}
increase = (key) => {
this.setState((prevState) => ({ ...prevState, [key]: prevState[key] + 1 }));
};
decrease = (key) => {
this.setState((prevState) => ({ ...prevState, [key]: prevState[key] - 1 || 0}));
};
render() {
return (
<div>
<Navbar />
<div className="container mt-4">
<button className="btn btn-primary mr-4">Redo</button>
<button
className="btn btn-secondary"
onClick={() => window.location.reload()}
>
Reload
</button>
<Items
amount={this.state.counter1}
increase={() => this.increase('counter1')}
decrease={() => this.decrease('counter1')}
/>
<Items
amount={this.state.counter2}
increase={() => this.increase('counter2')}
decrease={() => this.decrease('counter2')}
/>
<Items
amount={this.state.counter3}
increase={() => this.increase('counter3')}
decrease={() => this.decrease('counter3')}
/>
</div>
</div>
);
}
}
export default App;