質問編集履歴
1
該当のコンポーネントの全ソースコード記載しました
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
|
-
|
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として渡しています。
|