React state management and Components reusing

react_state_component_reuse.jsx

// Use https://jscomplete.com/playground/rgs to play with this

function Button(props) {
  const handleClick = () => props.myOnClickFunction(props.increment);
	return (
    <button onClick={onButtonClick}>
      +{props.increment}
    </button>
  );
}

function Display(props){
  return (<label>{props.message}</label>)  
}

function App(){
  const [counter, setCounter] = useState(10);
  const increamentCounter = (incrementValue) => setCounter(counter+incrementValue);
  return ( 
    <div>
      <Button myOnClickFunction={increamentCounter} increment={1}/>
      <Button myOnClickFunction={increamentCounter} increment={5}/>
      <Button myOnClickFunction={increamentCounter} increment={10}/>
      <Button myOnClickFunction={increamentCounter} increment={15}/>
      <Display  message={counter}/>
    </div>
  )
}

ReactDOM.render(
 <App/>, 
  document.getElementById('mountNode'),
);