SHARE
TWEET

Untitled

a guest Sep 15th, 2019 84 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component, useState, useEffect } from "react";
  2.  
  3. function Counter() {
  4.   const [count, setCount] = useState(0);
  5.   const [color, setColor] = useState("salmon");
  6.   const handleIncrease = () => setCount(count + 1);
  7.   const handleDecrease = () => setCount(count - 1);
  8.  
  9.   useEffect(() => {
  10.     console.log(
  11.       `I'm inside the useEffect function, the current count is ${count}`
  12.     );
  13.  
  14.     return () => {
  15.       console.log(
  16.         `I'm removing anything that was setup above! The last count was ${count}.`
  17.       );
  18.     };
  19.   });
  20.  
  21.   function handleColorChange() {
  22.     const nextColor = color === "salmon" ? "gold" : "salmon";
  23.     setColor(nextColor);
  24.   }
  25.  
  26.   return (
  27.     <div>
  28.       <button onClick={handleIncrease}>Increase</button>
  29.       <button onClick={handleColorChange}>Change Color</button>
  30.       <button onClick={handleDecrease}>Decrease</button>
  31.       <h1 style={{ color }}>{count}</h1>
  32.     </div>
  33.   );
  34. }
  35.  
  36. function App() {
  37.   const [visible, setVisible] = useState(false);
  38.  
  39.   return (
  40.     <div>
  41.       <button onClick={() => setVisible(!visible)}>
  42.         Show/Hide the Counter Component
  43.       </button>
  44.  
  45.       {visible && <Counter />}
  46.     </div>
  47.   );
  48. }
  49.  
  50. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top