MenuPage.js
2.2 KB
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
import React, { useState, useEffect } from 'react';
import NavBar from '../components/NavBar';
import MealCard from '../components/MealCard';
import { CustomInput, Form, FormGroup, Label } from 'reactstrap';
import { Container, Row, Col } from "reactstrap";
import axios from 'axios';
import Loading from '../components/Loading';
const MenuPage = (props) => {
const [datas, setDatas] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://localhost:5000/api/datas',
// localhost로 바꾸기
);
setDatas(result.data);
setIsLoading(true);
};
fetchData();
}, []);
return (
<>
<NavBar/>
<Container>
{/* ???????? ???? */}
{/* <FormGroup>
<Label for="exampleCheckbox">??</Label>
<div>
<CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
</div>
</FormGroup> */}
</Container>
{isLoading ?
(<Container>
<Row xs="2" sm="2" md="4">
{datas.map((data) =>
<Col>
<MealCard
id = {data.id}
name = {data.name}
address = {data.address}
latitude = {data.latitude}
longitude = {data.longitude}
type = {data.type}
menu = {data.menu}
img = {data.img}
img_source = {data.img_source}
/>
</Col>
)
}
</Row>
</Container>)
: <Loading/>
}
</>
);
}
export default MenuPage;