02.02 React State - basic counter (functional components)

App preview:

Project files:

---

import Counter from './Counter'
import './App.css'

function App() {
  return (
    <div className="app">
      <Counter/>
    </div>
  );
}

export default App;

---

.app{
    background-color: lightskyblue;
    padding: 20px 10px;
}

---

---

import React, { useState } from "react";

function Counter(){
  const [counter, handleClick] = useState(0);

  return (
    <div>
      <button onClick={() => ( handleClick(counter + 1)) }>Increment counter</button>
      {/* <button onClick={this.handleClick}>Increment counter</button> */}
      <div>Counter value is {counter}</div>
    </div>
  );
}

export default Counter