React Basics: Snippets 1

App.js: State/Events/Arrow functions (inline)

• useState() for tracking the ever popular counter application
• Use of an inline arrow function during an onClick event, as well as calling a function
• Displaying, and resetting a value stored in state

App.js

import React from 'react';

function App() {
  const [count, setCount] = React.useState(0); 
    
  function increment() {
      setCount(() => count + 1)
  }  
  /* function decrement() {
      setCount(() => count - 1)
  } */ 

  return (
    <div>
      <header>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={() => {setCount(() => count-1)}}>Decrement</button>
      </header>
    </div>
  );
}

export default App;