Sum of the components - reactjs

Question

I need to get a suma of the total amount of customers, the customer amount is entered through a button onClick and in total I have three shops all as different components, that are then called, how do I do it?
Component Shop
render(props) {
//##viewOn:private
//const [isOn, setIsOn] = useState(props.isOn);
const [count, setCount] = useState(0);
//##viewOff:private
//##viewOn:interface
//##viewOff:interface
//##viewOn:render
return (
<>
<div>
<h1>Kaufland</h1>
<p>Customers {count}</p>
<Uu5Elements.Button onClick={() => setCount((current) => current + 1)< 10}>+1</Uu5Elements.Button>
</div>
</>
//##viewOff:render
)},
});
//##viewOn:exports
export { Shop };
export default Shop;
//##viewOff:exports
and then I have pretty much copy-pastes of the component 2 more times for 2 more shops, fe.:
Component Shop2
render(props) {
//##viewOn:private
const [count, setCount] = useState(0);
//##viewOff:private
//##viewOn:interface
//##viewOff:interface
//##viewOn:render
return (
<>
<div>
<h1>Lidl</h1>
<p>Customers {count}</p>
<Uu5Elements.Button onClick={() => setCount((current) => current + 1)< 10}>+1</Uu5Elements.Button>
</div>
</>
//##viewOff:render
)},
});
//##viewOn:exports
export { Shop2 };
export default Shop2;
//##viewOff:exports
And then I cant piece together how to get the amount of the Shop and add it to the amount of the Shop2...
return (
<>
<RouteBar />
<div className={Css.mainContainer()}>
<div>{currentTime.toLocaleString("cs")}</div>
<h1>Total Customers</h1>
<Total sum={Shop + Shop2 />
<Shop />
<Shop2 />
</div>
</>
);

Answer 1

You need to define the state in the common parent component of the two shop components (Lifting State Up) so that data can be shared through props. I created an example for your reference:
Parent.js
import { useState } from "react";
import Shop1 from "./Shop1";
import Shop2 from "./Shop2";
const Parent = () => {
const [count, setCount] = useState(0);
return (
<>
<h1>Sum: {count}</h1>
<Shop1 setCount={setCount} />
<Shop2 setCount={setCount} />
</>
);
};
export default Parent;
Shop1.js
const Shop1 = ({ setCount }) => {
const add = () => {
setCount((prevCount) => prevCount + 1);
};
return <button onClick={add}>Click</button>;
};
export default Shop1;
Shop2.js
const Shop2 = ({ setCount }) => {
const add = () => {
setCount((prevCount) => prevCount + 1);
};
return <button onClick={add}>Click</button>;
};
export default Shop2;
App.js
import "./styles.css";
import Parent from "./Parent";
export default function App() {
return (
<div className="App">
<Parent />
</div>
);
}
View the online example here.