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.
import React, { useState } from "react";
export default function ExpenseInputs() {
const [expense, setExpense] = useState([]);
const [expenseName, setExpenseName] = useState("");
const [expenseAmt, setExpenseAmt] = useState();
const [expenseType, setExpenseType] = useState("");
const expenseTypes = ["Food", "Gas", "Entertainment", "Rent"];
const updateExpenseName = e => {
e.preventDefault();
setExpenseName(e.target.value);
console.log(e.target.value);
};
const updateExpenseAmt = e => {
e.preventDefault();
setExpenseAmt(e.target.value);
};
const addExpenses = () => {
};
return (
<>
<div className="field">
<label className="label">Expense</label>
<input
value={expenseName}
onChange={updateExpenseName}
className="expense-input"
type="text"
placeholder="Expense"
/>
</div>
<div className="field">
<label className="label">Amount</label>
<input
value={expenseAmt}
onChange={updateExpenseAmt}
className="expense-amount"
type="text"
placeholder="Expense amount"
/>
</div>
<div className="field">
<label className="label">Expense Type</label>
<select>
{expenseTypes.map(e => {
return <option>{e}</option>;
})}
</select>
</div>
<div className="field">
<button onClick={addExpenses} className="button">
Add
</button>
</div>
</>
);
}