React Step Counter - Ionic Typing CST Test

React Step Counter — Ionic Code

Ionic React counter example with customizable step increment.

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

const Counter = () => {
	const [count, setCount] = useState(0);
	const [step, setStep] = useState(1);

	return (
		<IonApp>
		<IonHeader>
		<IonToolbar>
		<IonTitle>Step Counter</IonTitle>
		</IonToolbar>
		</IonHeader>
		<IonContent className="ion-padding" style={{textAlign:'center'}}>
		<IonText><h2>Counter: {count}</h2></IonText>
		<IonInput type='number' value={step} onIonChange={e => setStep(parseInt(e.detail.value,10)||1)} placeholder='Step'/>
		<IonButton onClick={() => setCount(count + step)}>+</IonButton>
		<IonButton onClick={() => setCount(count - step)}>-</IonButton>
		<IonButton onClick={() => setCount(0)}>Reset</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