App.js

import React, { useState } from 'react';

const HelloWorld = (props) => {
  return (
    <h1>Hello {props.name}!</h1>
  )
}

// display a number
// a button to increase the number
const Counter = () => {
  // let number = 0 // remember this!
  const [number, setNumber] = useState(0)
  // Array destructuring

  const increaseNumber = () => {
    // number++

    // increase the number AND rerender the component
    setNumber(number + 1)
    // alert('Hello world!')
  }

  return (
    <div>
      <h1>Count: {number}</h1>
      <button onClick={increaseNumber}>Click!</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <Counter />
      <Counter />
      <Counter />
      <Counter />
      <Counter />
    </div>
  );
}

export default App;