-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
76 lines (57 loc) · 1.5 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React, { useState } from 'react'
import Expensess from './component/Expenses/Expenses'
import NewExpense from './component/NewExpense/NewExpense';
const DUMMY_EXPENSES = [
{id : 'e1',
title : 'Toilet Paper',
amount : 144 ,
date : new Date(2021, 4, 14),
},
{id : 'e2',
title : 'Hand Watch',
amount : 274 ,
date : new Date(2022, 5, 17)
},
{id : 'e3',
title : 'monitor',
amount : 450.2 ,
date : new Date(2022, 6, 19)
}
];
const App = () => {
// start ex
const [count, setcount] = useState(0)
const [textColor, setTextColor] = useState('green')
const ChangeeColor = () => {
setTextColor(textColor==='green' ? 'blue' : 'green')
}
// end ex
const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
const addExpenseHandler = expense => {
setExpenses((prevExpenses) => {
return [expense, ...prevExpenses]
});
};
// return React.createElement(
// 'div',
// {},
// React.createElement('h2', {}, 'lets get start'),
// React.createElement(Expensess, { items: expenses})
// );
return (
<div >
<NewExpense onAddExpense={addExpenseHandler} />
<Expensess items={expenses} />
<button onClick={() => {setcount(count +1)}}>increat</button>
<button onClick={() => {setcount(count -1)}}>decreas</button>
<button onClick={() => {setcount(0)}}>set to 0</button>
<h1>{count}</h1>
<br></br>
<br></br>
<h2 style={{color : textColor}}>amir hossein</h2>
<button onClick={ChangeeColor} >ChangeColor</button>
<br></br>
</div>
);
}
export default App;