Counter with History - Preact Typing CST Test

Counter with History — Preact Code

Tracks increment/decrement history.

import { h } from 'preact';
import { useState } from 'preact/hooks';

function HistoryCounter() {
	const [count, setCount] = useState(0);
	const [history, setHistory] = useState([]);
	const increment = () => { setCount(count + 1); setHistory([...history,'Increment']); };
	const decrement = () => { setCount(count - 1); setHistory([...history,'Decrement']); };
	const reset = () => { setCount(0); setHistory([...history,'Reset']); };
	return (
		<div>
		<h2>Counter: {count}</h2>
		<div>History: {history.join(', ')}</div>
		<button onClick={increment}>+</button>
		<button onClick={decrement}>-</button>
		<button onClick={reset}>Reset</button>
		</div>
	);
}

export default HistoryCounter;

Preact Language Guide

Preact is a fast, lightweight JavaScript library for building user interfaces with a React-like API. It emphasizes small bundle size, performance, and compatibility with modern web standards while providing an easy transition for React developers.

More Preact Typing Exercises

Practice Other Languages