teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

該当のコンポーネントの全ソースコード記載しました

2020/09/06 04:42

投稿

Kana-T
Kana-T

スコア5

title CHANGED
File without changes
body CHANGED
@@ -19,12 +19,24 @@
19
19
  export const IncomeExpense = (incomeItems, expenseItems ) => {
20
20
 
21
21
  const incomeAmounts = incomeItems.map(incomeItem => incomeItem.amount);
22
-
22
+
23
23
  const incomeTotal = incomeAmounts.reduce((acc, cur) => {
24
24
  return acc = acc + cur;
25
25
  });
26
26
 
27
+ return (
28
+ <div>
29
+ <div>
30
+ <h4>Income</h4>
27
- //累計を計算後{incomeTotal}をreturnに書きます
31
+ <p>{incomeTotal}</p>
32
+ </div>
33
+ <div>
34
+ <h4>Expense</h4>
35
+ <p>-5,000円</p>
36
+ </div>
37
+ </div>
38
+ )
39
+ }
28
40
  ```
29
41
 
30
42
  AddItem.js
@@ -83,6 +95,60 @@
83
95
  }
84
96
  ```
85
97
 
98
+ Home.js
99
+ ```JavaScript
100
+ import React, {useState} from 'react';
101
+ import { app } from "../firebase/Firebase";
102
+ import { Header } from './Header';
103
+ import { Balance } from './Balance';
104
+ import { IncomeExpense } from './IncomeExpense';
105
+ import { AddItem } from './AddItem';
106
+ import { ItemsList } from './ItemsList';
107
+
108
+ function Home (props) {
109
+
110
+ const [inputText, setInputText] = useState("");
111
+ const [inputAmount, setInputAmount] = useState(0);
112
+ const [incomeItems, setIncomeItems] = useState([]);
113
+ const [expenseItems, setExpenseItems] = useState([]);
114
+ const [type, setType] = useState("inc");
115
+
116
+ return (
117
+ <div>
118
+ <Header />
119
+ <Balance />
120
+ <IncomeExpense
121
+ incomeItems={incomeItems}
122
+ expenseItems={expenseItems}
123
+ />
124
+ <AddItem
125
+ inputText={inputText}
126
+ setInputText={setInputText}
127
+ inputAmount={inputAmount}
128
+ setInputAmount={setInputAmount}
129
+ incomeItems={incomeItems}
130
+ setIncomeItems={setIncomeItems}
131
+ expenseItems={expenseItems}
132
+ setExpenseItems={setExpenseItems}
133
+ type={type}
134
+ setType={setType}
135
+ />
136
+ <ItemsList
137
+ incomeItems={incomeItems}
138
+ setIncomeItems={setIncomeItems}
139
+ expenseItems={expenseItems}
140
+ setExpenseItems={setExpenseItems}
141
+ />
142
+ <button onClick={() => app.auth().signOut()}>log out</button>
143
+ </div>
144
+ )
145
+ }
146
+
147
+ export default Home;
148
+
149
+
150
+ ```
151
+
86
152
  ### 試したこと
87
153
 
88
154
  メインからincomeItemsをpropsとして渡しています。