Update same variable from two different components - reactjs

Question

I want to use the same state variable say count and update and retrieve the updated one.
I wrote the following code as a higher order component consisting of one button and one label . Both updates the count but they have separate instances. So how can I re-align my code to keep the same copy of the variable count.
const HOC = (InnerComponent) => class extends React.Component{
constructor(){
super();
this.state = {
count: 0
}
}
update(){
this.setState({count: this.state.count + 1})
}
render(){
return(
<InnerComponent
{...this.props}
{...this.state}
update = {this.update.bind(this)}
/>
)
}
};
class App extends React.Component {
render() {
return (
<div>
<Button>Button</Button>
<hr />
<LabelHOC>Label</LabelHOC>
</div>
);
}
}
const Button = HOC((props) => <button onClick={props.update}>{props.children} - {props.count}</button>)
class Label extends React.Component{
render(){
return(
<label onMouseMove={this.props.update}>{this.props.children} - {this.props.count}</label>
)
}
}
const LabelHOC = HOC(Label)
export default App;

Answer 1

You need to do some "thinking-in-react".
React is just a rendering library, it renders the state, so you need to do some thinking about where that state should live. It's common for your scenario to start look at some sort of Flux library that can handle this "one source of truth" (keep you state in one place only), like Redux for example. If you're using Redux then the Redux store would hold the "count" state for both components and they could both update and read it, so that would be my suggestion in the long run. But to solve your immediate question, you must let a higher component hold the state and then of course also modify that state, you do that by passing down the state and a update function as props to the children.
This is snippet of how it could look, just send the state (count) and the update function down to the child components. I excluded HOC component because i think it just adds to your confusion here. But i'm sure you can imagine how it would work. :)
class App extends React.Component {
constructor(){
super();
this.state = {
count: 0
}
this.update = this.update.bind(this); //Bind it once
}
update(){
this.setState({count: this.state.count + 1})
}
render() {
return (
<div>
<Button count={this.state.count} update={this.update}>Button</Button>
<hr />
<LabelHOC count={this.state.count} update={this.update}>Label</LabelHOC>
</div>
);
}
}
Good reads from the docs:
Components and props
Data flows down