const { useState, useRef } = React;

function useCounter() {
  const [ changeCount, setChangeCount ] = useState(0);
  
  const inc = function() {
    setChangeCount(changeCount + 1);
  };

  const reset = () => setChangeCount(0);

  return { reset, inc, changeCount };
}

function TextInput(props) {
  
  const { inc, reset, changeCount } = useCounter();
  
  const inputEl = useRef(null);
  
  function myReset() {
    reset();
    inputEl.current.value = '';
  }
  
  return (
    <div>
      <p>This text was changed {changeCount} times</p>
      <input type="text" onChange={inc} ref={inputEl} />
      <button onClick={myReset}>Clear</button>
    </div>      
  )
}

function ButtonInput(props) {
  const { inc, changeCount } = useCounter();
  
  return (
    <div>
      <button onClick={inc}>This button was clicked {changeCount} times</button>
    </div>      
  )  
}

class App extends React.Component {
  render() {
    return (
      <div>
        <TextInput />
        <TextInput />
        <ButtonInput />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));