渲染多个输入React

Question

I've created a simple Budget app using React . The user can add Income/Expense Description and Value by filling out the inputs and the final result gets added to the Expenses/Incomes lists.

I managed to add the Income/Expenses values (numbers): I've created a setState with incomes: [1, 3, 4], map around the income array and print out the values by updating the state.

I can't understand how to add the description. I've checked some questions here on Stack but they only use setState and creating a state for each element (incomes, incomeValues, expenses, expensesValue), which is not what I want.

Is there a way to do this without involving too many states? Maybe using an Object?

Github Link

Answer 1

Your state is an object

{
  monthlyBudget: 0,
  incomesSum: 0,
  expensesSum: 0,
  incomes: [0],
  expenses: [0]
}

What you could do instead of adding more numbers to the incomes array is add objects to the incomes array. Exactly like you guessed.

{
  monthlyBudget: 0,
  incomesSum: 0,
  expensesSum: 0,
  incomes: [
    { amount: 0, description: 'some description' },
    { amount: 1, description: 'second description' },
  ]
  expenses: [0]
}

in which case you would still use map to access the properties of the object.

this.sate.incomes.map(income => {
  // do something with income.amount
  // do something with income.description
})