Todo With Priority - Reactxp Typing CST Test

Todo With Priority — Reactxp Code

Todo app where each task has a priority and displays it.

import RX from 'reactxp';

class PriorityTodoApp extends RX.Component {
	constructor(props) {
		super(props);
		this.state = { todos: [], task: '', priority: '' };
	}

	addTodo = () => {
		if(this.state.task.trim()) {
		this.setState({ todos: [...this.state.todos, {task: this.state.task, priority: this.state.priority}], task:'', priority:'' });
		}
	};

	render() {
		return (
		<RX.View style={{ padding: 20 }}>
		<RX.TextInput placeholder='Task' value={this.state.task} onChangeText={task => this.setState({ task })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
		<RX.TextInput placeholder='Priority' value={this.state.priority} onChangeText={priority => this.setState({ priority })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
		<RX.Button onPress={this.addTodo}><RX.Text>Add</RX.Text></RX.Button>
		{this.state.todos.map((todo,i) => <RX.Text key={i}>{todo.task} (Priority: {todo.priority})</RX.Text>)}
		</RX.View>
		);
	}
}

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

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