React Multi Counter - Ionic Typing CST Test

React Multi Counter — Ionic Code

Ionic React example with multiple independent counters in one page.

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

const MultiCounter = () => {
	const [counters, setCounters] = useState([0,0,0]);

	const increment = index => {
		const newCounters = [...counters];
		newCounters[index]++;
		setCounters(newCounters);
	};

	return (
		<IonApp>
		<IonHeader>
		<IonToolbar>
		<IonTitle>Multi Counter</IonTitle>
		</IonToolbar>
		</IonHeader>
		<IonContent className="ion-padding" style={{textAlign:'center'}}>
		{counters.map((count, index) => (
		<div key={index} style={{marginBottom:'20px'}}>
		<IonText><h2>Counter {index+1}: {count}</h2></IonText>
		<IonButton onClick={() => increment(index)}>+</IonButton>
		</div>
		))}
		</IonContent>
		</IonApp>
	);
}

export default MultiCounter;

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