Multi Counter - Reactxp Typing CST Test

Multi Counter — Reactxp Code

Multiple independent counters in a single view.

import RX from 'reactxp';

class MultiCounterApp extends RX.Component {
	constructor(props) {
		super(props);
		this.state = { counters: [0,0,0] };
	}

	increment = index => {
		const counters = [...this.state.counters]; counters[index]++; this.setState({ counters });
	};
	decrement = index => {
		const counters = [...this.state.counters]; counters[index]--; this.setState({ counters });
	};

	render() {
		return (
		<RX.View style={{ padding: 20 }}>
		{this.state.counters.map((count, i) => (
		<RX.View key={i} style={{ marginBottom: 10 }}>
		<RX.Text style={{ fontSize: 20 }}>Counter {i+1}: {count}</RX.Text>
		<RX.Button onPress={() => this.increment(i)} style={{ marginRight: 5 }}><RX.Text>+</RX.Text></RX.Button>
		<RX.Button onPress={() => this.decrement(i)}><RX.Text>-</RX.Text></RX.Button>
		</RX.View>
		))}
		</RX.View>
		);
	}
}

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

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