expenses | 💰Expense tracker using Google Sheets 📉 as a storage written in React | User Interface library

For references sake, I was able to complete the issue with a Value List. I added the below in my table as a dimension to display the categories:

I didn't go in detail about logic on your code but I guess error based on your code at

There are a few logic/structure issues with your code so I'll first explain each of them, then at the bottom you can find the resulting code

To be sure you listed to the keyup even on all fields, you need to separate with the comma within the same parameter, so instead of being

on('keyup','input.expenses','input.deductions',function()

It must be

on('keyup','input.expenses, input.deductions',function()

You're using a foreach loop to generate your table rows. So you'll have a lot of rows with the same content, which is fine. However, for the last cell of your row, you're using id="total" which is wrong because in any HTML page there can only be 1 element with a unique id. With your code, you will have all rows having the same ID for the last td.

So you need to remove the ID and use a class instead.

From

input type="text" id="total" name="txttotal[]" class="form-control"

You go to

input type="text" name="txttotal[]" class="form-control total"

Currently your code only loops the .expenses so the txtbasic and txtallowance values. You also need to loop the deductions to obtain txtsocso and txtkwsp

SQLite doesn't support inheritance and I believe that it will be as simple, if not simpler, to utilise relationships which SQLite and Room support.

Creating multiple tables via room is pretty easy as is creating and handling relationships. So I would suggest taking the typical approach.

Here's an example based upon what I think that yo are trying to accomplish.

First the CarServiceEntry table (which will later have Expenses and Incomes related to it) :-

To set the value of the selected option you will have to reach the event target value and set value to the select tag like this:

If you will change the value in the setState method, you can initialize the variable with

DateTime _selectedDate = DateTime.now();

and format it to the format you show the user, this would get rid of the error and if you are going to change it each time the user selects a date, seeing the current date as a starting value gives the user a starting pont as a refference.

Are the columns are you summing always the same? That is, are there always 3 2019 columns with those same names, and 3 2020 columns with those names? If so, you can just hardcode those new columns.

try:

When you're mapping over Object.keys(context), what you're actually mapping over is ["expenseType","description","value","setExpenseType","setDescription","setValue"], because these are the keys of the object your context provides

Because those are strings, key.expenseType and key.description are undefined.

From what I have read I am pretty sure you're trying to do something else, you probably want your context to provide an array of objects which you map over, something like