回答編集履歴
2
class -> className
answer
CHANGED
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
|
|
98
98
|
export const SpotCard: VFC<SpotCardProps> = (props) => {
|
|
99
99
|
return (
|
|
100
|
-
<div
|
|
100
|
+
<div className='card'>
|
|
101
|
-
<div
|
|
101
|
+
<div className='card-name'>{props.spot.name}</div>
|
|
102
|
-
<div
|
|
102
|
+
<div className='card-title'>{props.spot.title}</div>
|
|
103
|
-
<div
|
|
103
|
+
<div className='card-area'>{props.spot.area}</div>
|
|
104
104
|
</div>
|
|
105
105
|
);
|
|
106
106
|
};
|
|
@@ -136,10 +136,10 @@
|
|
|
136
136
|
```tsx
|
|
137
137
|
export const SpotCard: VFC<{ spot: SpotData }> = ({ spot }) => {
|
|
138
138
|
return (
|
|
139
|
-
<div
|
|
139
|
+
<div className='card'>
|
|
140
|
-
<div
|
|
140
|
+
<div className='card-name'>{spot.name}</div>
|
|
141
|
-
<div
|
|
141
|
+
<div className='card-title'>{spot.title}</div>
|
|
142
|
-
<div
|
|
142
|
+
<div className='card-area'>{spot.area}</div>
|
|
143
143
|
</div>
|
|
144
144
|
);
|
|
145
145
|
};
|
1
追記
answer
CHANGED
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
|
|
148
148
|
---
|
|
149
149
|
|
|
150
|
-
そして、SpotCard を使う側では、複数の場所のデータを配列で持って、それらを map を使って表示することになるでしょうね。(SpotData の配列を表す変数名は複数形の spots、一つの SpotData は spot という単数形なことに注意。)
|
|
150
|
+
そして、SpotCard を使う側では、複数の場所のデータを配列で持って、それらを map を使って表示することになるでしょうね。(SpotData の配列を表す変数名は複数形の spots、一つの SpotData は spot という単数形なことに注意。紛らわしければ spots の代わりに spotArray とかにしても良いでしょう。)
|
|
151
151
|
|
|
152
152
|
```tsx
|
|
153
153
|
const Index: NextPage = () => {
|