Auto Increment Counter - Reactxp Typing CST Test

Auto Increment Counter — Reactxp Code

Counter that automatically increments every second.

import RX from 'reactxp';

class AutoIncrementCounterApp extends RX.Component {
	constructor(props) {
		super(props);
		this.state = { count: 0, isRunning: true };
	}

	componentDidMount() {
		this.timer = setInterval(() => { if(this.state.isRunning) this.setState({ count: this.state.count + 1 }); }, 1000);
	}
	componentWillUnmount() { clearInterval(this.timer); }
	toggleRunning = () => this.setState({ isRunning: !this.state.isRunning });
	reset = () => this.setState({ count: 0 });

	render() {
		return (
		<RX.View style={{ padding: 20 }}>
		<RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
		<RX.Button onPress={this.toggleRunning} style={{ marginRight: 10 }}><RX.Text>{this.state.isRunning ? 'Pause' : 'Resume'}</RX.Text></RX.Button>
		<RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
		</RX.View>
		);
	}
}

RX.App.register('AutoIncrementCounterApp', () => AutoIncrementCounterApp);

Reactxp Language Guide

ReactXP is a library developed by Microsoft for building cross-platform apps using a single React and React Native codebase. It enables developers to target iOS, Android, and web platforms simultaneously.

More Reactxp Typing Exercises

Practice Other Languages