-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcreate_react_usable_comp.js
78 lines (56 loc) · 1.19 KB
/
create_react_usable_comp.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
// Prop drilling is one of the important Concept to be covered
import React from "react";
import { Button } from "./component/Button";
import Header from "./component/Header";
import Body from "./component/Body";
const App = () => {
return (
<div>
<Body />
<Header />
</div>
);
};
export default App;
// Header
import React from "react";
import { Button } from "./Button";
const Header = () => {
const solve = (e) => {
alert("Header button clicked");
};
return (
<div>
<Button value="Header" onClick={solve} isLoading={true} />
</div>
);
};
export default Header;
//Button
import React, { useState } from "react";
export const Button = ({ value, onClick, isLoading }) => {
return isLoading ? (
<p>It is loading</p>
) : (
<div
onClick={onClick}
className="bg-red-700 w-3/4 flex justify-center text-white"
>
{value}
</div>
);
};
// Body
import React from "react";
import { Button } from "./Button";
const Body = () => {
const solve = (e) => {
alert("Body button clicked");
};
return (
<div>
<Button value="Body" onClick={solve} isLoading={false} />
</div>
);
};
export default Body;