React Counter Example - Ionic Typing CST Test

React Counter Example — Ionic Code

Demonstrates a simple counter layout using Ionic React components and React for interactivity.

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

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

	const toggleTheme = () => {
		setIsDark(!isDark);
		document.body.className = isDark ? 'light-theme' : 'dark-theme';
	};

	return (
		<IonApp>
		<IonHeader>
		<IonToolbar>
		<IonTitle>Ionic Counter</IonTitle>
		</IonToolbar>
		</IonHeader>
		<IonContent className="ion-padding" style={{ textAlign: 'center' }}>
		<IonText><h2>Counter: {count}</h2></IonText>
		<IonButton color="primary" onClick={() => setCount(count + 1)}>+</IonButton>
		<IonButton color="danger" onClick={() => setCount(count - 1)}>-</IonButton>
		<IonButton color="medium" onClick={() => setCount(0)}>Reset</IonButton>
		<br /><br />
		<IonButton color="tertiary" onClick={toggleTheme}>Switch Theme</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