React Auto Increment Counter - Ionic Typing CST Test

React Auto Increment Counter — Ionic Code

Ionic React counter example that automatically increments every second.

import React, { useState, useEffect } from 'react';
import { IonApp, IonContent, IonHeader, IonToolbar, IonTitle, IonText, IonButton } from '@ionic/react';

const AutoCounter = () => {
	const [count, setCount] = useState(0);
	const [isRunning, setIsRunning] = useState(true);

	useEffect(() => {
		const interval = setInterval(() => {
		if(isRunning) setCount(c => c+1);
		}, 1000);
		return () => clearInterval(interval);
	}, [isRunning]);

	return (
		<IonApp>
		<IonHeader>
		<IonToolbar>
		<IonTitle>Auto Counter</IonTitle>
		</IonToolbar>
		</IonHeader>
		<IonContent className="ion-padding" style={{textAlign:'center'}}>
		<IonText><h2>Counter: {count}</h2></IonText>
		<IonButton onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Pause' : 'Resume'}</IonButton>
		<IonButton onClick={() => setCount(0)}>Reset</IonButton>
		</IonContent>
		</IonApp>
	);
}

export default AutoCounter;

Ionic Language Guide

Ionic Framework is an open-source UI toolkit for building high-quality, cross-platform mobile, desktop, and web apps using web technologies like HTML, CSS, and JavaScript, often paired with Angular, React, or Vue.

More Ionic Typing Exercises

Practice Other Languages