Counter with Auto Increment - Inferno Typing CST Test

Counter with Auto Increment — Inferno Code

Counter that automatically increments every second.

import { render, Component } from 'inferno';

class Counter extends Component {
	state = { count: 0, isDark: false, auto: false, timer: null };

	increment = () => this.setState({ count: this.state.count + 1 });
	decrement = () => this.setState({ count: this.state.count - 1 });
	reset = () => this.setState({ count: 0 });
	toggleTheme = () => this.setState({ isDark: !this.state.isDark });
	toggleAuto = () => {
		if (!this.state.auto) {
		const timer = setInterval(this.increment, 1000);
		this.setState({ auto: true, timer });
		} else {
		clearInterval(this.state.timer);
		this.setState({ auto: false, timer: null });
		}
	};

	render() {
		return (
		<div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {this.state.count}</h2>
		<div>
		<button onClick={this.increment}>+</button>
		<button onClick={this.decrement}>-</button>
		<button onClick={this.reset}>Reset</button>
		<button onClick={this.toggleAuto}>{this.state.auto ? 'Stop Auto' : 'Start Auto'}</button>
		</div>
		<button onClick={this.toggleTheme}>Toggle Theme</button>
		</div>
		);
	}
}

render(<Counter />, document.body);

Inferno Language Guide

Inferno.js is an extremely fast, lightweight JavaScript library for building high-performance user interfaces. It uses a React-like API and Virtual DOM but is optimized for speed, small size, and predictable rendering.

More Inferno Typing Exercises

Practice Other Languages