Todo With Priority - Nativebase Typing CST Test

Todo With Priority — Nativebase Code

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

import React, { useState } from 'react';
import { NativeBaseProvider, Box, Input, Button, VStack, Text } from 'native-base';

export default function App() {
	const [todos, setTodos] = useState([]);
	const [task, setTask] = useState('');
	const [priority, setPriority] = useState('');

	const addTodo = () => {
		if(task.trim()) {
		setTodos([...todos, {task, priority}]);
		setTask(''); setPriority('');
		}
	};

	return (
		<NativeBaseProvider>
		<Box safeArea p={4}>
		<VStack space={4} alignItems="center">
		<Input placeholder="Task" value={task} onChangeText={setTask} />
		<Input placeholder="Priority" value={priority} onChangeText={setPriority} />
		<Button onPress={addTodo}>Add</Button>
		{todos.map((todo,i) => <Text key={i}>{todo.task} (Priority: {todo.priority})</Text>)}
		</VStack>
		</Box>
		</NativeBaseProvider>
	);
}

Nativebase Language Guide

NativeBase is an open-source UI component library for React Native, providing a set of cross-platform, customizable components that accelerate mobile app development with consistent design.

More Nativebase Typing Exercises

Practice Other Languages