expense-tracker | QuickAdd Expense Tracker | Android library

What's the reason the inputs do not align with the button and other elements?

Layout (Firefox Developer Edition) shows that the sizes of input and label elements differ even though they are in the same div.

What causes this? And how to align them in an elegant way (without changing margin through trial and error for example)?

Relevant section of NewTransaction.js file:

CSS file of NewTransaction:

SOURCE CODE: https://github.com/yanichik/react-course/tree/main/full-course/expense-tracker-v2

I'm a React newbie and this is my first question on Stackoverflow. I have a budget app where a user can choose the option "Income" or "Expense" and two inputs - Name and Amount. My app is based on this tutorial project https://github.com/bradtraversy/expense-tracker-react

In newExpenseTransaction/newIncomeTransaction I have:

text: input text - name of income/expense

amount: input amount

option: this state came from form, where user check "income"/"expense"

I am using useContext for transaction.

Everything is working fine except a validation between newExpenseTransaction and newIncomeTransaction.

I need, I think simple if condition based on what's user choosing in form ("income"/"expense").

IF selected option in form/transaction option is "income" RETURN addTransaction(newIncomeTransaction)

IF selected option in form/transaction option is "expense" RETURN addTransaction(newExpenseTransaction)

In the code below the IF condition doesn't work but the code executes the first function, in this case: addTransaction(newExpenseTransaction).

In global state everything looks good.

So, my question is: How should I condition the form option state to return addTransaction(newIncomeTransaction) or addTransaction(newExpenseTransaction)?

I am building a expense tracker app using react + typescript

expense_type.ts

I have this code in which I am using reducer and context api. I have coded the reducer which is Adding the Transaction. But now I also want it to delete the list items. How can I pass the Id to the reducer to delete the specific array?

TransactionContext.js

I built an app using React and Node Js and now I want to deploy it over Firebase. I am new to these frameworks and just couldn't figure out what went wrong.

While running the server locally everything works fine but when I run 'firebase serve' I get a response that says "You need to enable JavaScript to run this app".

The app is deployed here -> Expense Tracker

You can see the XHR request, transactions, in dev tools.

Thanks in advance.

client/package.json:

I am building an Expense tracker and I need to add functionality to delete the items that I add. I am trying to use .filter method to see if the expense id state variable matches up with the parameter. Then I need to pass the function into props

I am making a React app that tracks your expenses. Right now in the ExpenseInput component I want to be able to extract the values of the inputs and alert the values that were entered. Later on I will want to render a list of expenses similar to a ToDo App. I have some stuff setup already. I know that the expense state variable should store all you expenses and all the other state variables are set to its respective inputs. I just am not sure what the next step should be.