armadiazrino

NormalStateTimer.js

Nov 28th, 2020
546
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { Text, View } from "react-native"
  3.  
  4. class App extends React.Component {
  5.     // TODO (1) Define the state object
  6.     state = {
  7.         seconds: 0
  8.     }
  9.  
  10.     // TODO (2) Create tick function to update seconds state
  11.     tick() {
  12.         this.setState(state => ({
  13.             seconds: state.seconds + 1
  14.         }))
  15.     }
  16.  
  17.     // TODO (3) Create interval referrence inside componentDidMount with setInterval value to create the timer
  18.     // & call tick function inside the setInterval callbacks
  19.     componentDidMount() {
  20.         this.interval = setInterval(() => {
  21.             this.tick()
  22.         }, 1000); // in milliseconds
  23.     }
  24.  
  25.     // TO DO (4) call clearInterval function to remove the interval referrence inside componentWillUnmount
  26.     componentWillUnmount() {
  27.         clearInterval(this.interval)
  28.     }
  29.  
  30.     render() {
  31.         return (
  32.             <View style={{ flex: 1, margin: 16 }}>
  33.                 <View>
  34.                     {/* TO DO (5) use this.state.seconds to get the value from our state */}
  35.                     <Text>{"Seconds : " + this.state.seconds}</Text>
  36.                 </View>
  37.             </View>
  38.         )
  39.     }
  40. }
  41.  
  42. export default App
  43.  
RAW Paste Data