React Toggle Counter Example - Ionic Typing CST Test

React Toggle Counter Example — Ionic Code

Demonstrates a counter with an additional toggle button to double the increment in Ionic React.

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

const Counter = () => {
	const [count, setCount] = useState(0);
	const [double, setDouble] = useState(false);

	return (
		<IonApp>
		<IonHeader>
		<IonToolbar>
		<IonTitle>Toggle Counter</IonTitle>
		</IonToolbar>
		</IonHeader>
		<IonContent className="ion-padding" style={{ textAlign: 'center' }}>
		<IonText><h2>Counter: {count}</h2></IonText>
		<IonButton onClick={() => setCount(count + (double ? 2 : 1))}>+</IonButton>
		<IonButton onClick={() => setCount(count - (double ? 2 : 1))}>-</IonButton>
		<IonButton onClick={() => setCount(0)}>Reset</IonButton>
		<br /><br />
		<IonButton onClick={() => setDouble(!double)}>Toggle Double: {double ? 'ON' : 'OFF'}</IonButton>
		</IonContent>
		</IonApp>
	);
};

export default Counter;

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