Expense Tracker - Draftbit Typing CST Test

Expense Tracker — Draftbit Code

Tracks daily expenses with visual Draftbit forms and stores entries locally using React Native state.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function ExpenseTracker() {
	const [expenses, setExpenses] = useState([]);
	const [amount, setAmount] = useState('');
	const [desc, setDesc] = useState('');

	const addExpense = () => {
		if(amount && desc){
		setExpenses([...expenses, { amount, desc }]);
		setAmount('');
		setDesc('');
		}
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput placeholder='Description' value={desc} onChangeText={setDesc} />
		<TextInput placeholder='Amount' keyboardType='numeric' value={amount} onChangeText={setAmount} />
		<Button title='Add Expense' onPress={addExpense} />
		<FlatList data={expenses} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item.desc}: ${item.amount}</Text>} />
		</View>
	);
}

Draftbit Language Guide

Draftbit is a no-code and low-code visual builder for creating React Native mobile apps. It allows designers, founders, and developers to visually build screens, components, and navigation flows, while exporting clean React Native code.

More Draftbit Typing Exercises

Practice Other Languages