WEB422 Week 4 - React Events

App.jsx

import { useState } from 'react';

import ClickCounter from './ClickCounter';
import ClickHeading from './ClickHeading';

function App() {
  // State: held by the parent
  const [numClicks, setNumClicks] = useState(0);

  const onClickHandler = (e) => setNumClicks(numClicks + 1);

  return (
    <div>
      <ClickHeading clicks={numClicks} />
      <ClickCounter clicks={numClicks} onClick={onClickHandler} />
    </div>
  );
}

export default App;

ClickCounter.jsx

function ClickCounter({ clicks, onClick }) {
  return (
    <button
      className="click-button"
      onClick={onClick}
    >Clicks {clicks}</button>
  );
}

export default ClickCounter;

ClickHeading.jsx

export default function ClickHeading({ clicks }) {
  if(clicks === 0) {
    return null;
  }
  
  const times = clicks > 1 ? 'times' : 'time';

  return (
    <h1>
      You've clicked { clicks } { times }
    </h1>
  );  
}