armadiazrino

HookTimer.js

Nov 28th, 2020
610
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import { Text, View } from "react-native"
  3.  
  4. // TODO (1) We make our Function Component
  5. const App = () => {
  6.     // TODO (2) Create our states using useState, it looks like a tupple,
  7.     // but it's actually an array of 0 for the state object
  8.     // & 1 for the function to change the state. Lastly, there's a useState(0)
  9.     // it's to define our default value
  10.     const [seconds, setSeconds] = useState(0)
  11.  
  12.     // TODO (3) Using useEffect to trigger our setInterval functions
  13.     useEffect(() => {
  14.         // TODO (4) Creating interval reference with setInterval and calls setSeconds
  15.         // to change our state value
  16.         const interval = setInterval(() => {
  17.             setSeconds(seconds + 1)
  18.         }, 1000); // in milliseconds
  19.         return () => clearInterval(interval)
  20.     }, [seconds])
  21.  
  22.     // TODO (5) Create the View
  23.     return (
  24.         <View style={{ flex: 1, margin: 16 }}>
  25.             <View>
  26.                 {/* TO DO (6) call seconds, which is the state object we've created in TODO (2) */}
  27.                 <Text>{"Seconds : " + seconds}</Text>
  28.             </View>
  29.         </View>
  30.     )
  31. }
  32.  
  33. export default App
  34.  
RAW Paste Data