Countdown Timer - Reactxp Typing CST Test

Countdown Timer — Reactxp Code

Countdown timer starting from 10 seconds.

import RX from 'reactxp';

class CountdownApp extends RX.Component {
	constructor(props) {
		super(props);
		this.state = { count: 10 };
	}

	componentDidMount() {
		this.timer = setInterval(() => { if(this.state.count > 0) this.setState({ count: this.state.count - 1 }); }, 1000);
	}
	componentWillUnmount() { clearInterval(this.timer); }
	render() {
		return (
		<RX.View style={{ padding:20 }}>
		<RX.Text style={{ fontSize:24, marginBottom:10 }}>Time: {this.state.count}</RX.Text>
		<RX.Button onPress={() => this.setState({ count: 10 })}><RX.Text>Reset</RX.Text></RX.Button>
		</RX.View>
		);
	}
}

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

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