質問編集履歴
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -127,4 +127,78 @@
|
|
|
127
127
|
)
|
|
128
128
|
}
|
|
129
129
|
```
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
②試したこと
|
|
133
|
+
|
|
134
|
+
TypeError: doc.data is not a function
|
|
135
|
+
```
|
|
136
|
+
import React from 'react'
|
|
137
|
+
import { makeStyles } from '@material-ui/core/styles'
|
|
138
|
+
import Card from '@material-ui/core/Card'
|
|
139
|
+
import CardActionArea from '@material-ui/core/CardActionArea'
|
|
140
|
+
import CardActions from '@material-ui/core/CardActions'
|
|
141
|
+
import CardContent from '@material-ui/core/CardContent'
|
|
142
|
+
import CardMedia from '@material-ui/core/CardMedia'
|
|
143
|
+
import Button from '@material-ui/core/Button'
|
|
144
|
+
import Typography from '@material-ui/core/Typography'
|
|
145
|
+
import Divider from '@material-ui/core/Divider'
|
|
130
|
-
|
|
146
|
+
import { db } from '../../firebase/index'
|
|
147
|
+
const useStyles = makeStyles({
|
|
148
|
+
root: {
|
|
149
|
+
maxWidth: 345,
|
|
150
|
+
},
|
|
151
|
+
})
|
|
152
|
+
class ImgMediaCard extends React.Component {
|
|
153
|
+
constructor(props) {
|
|
154
|
+
super(props)
|
|
155
|
+
this.state = {
|
|
156
|
+
title: '',
|
|
157
|
+
url: '',
|
|
158
|
+
tag: '',
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
componentDidMount() {
|
|
163
|
+
const doc = db.collection('handsOn').get()
|
|
164
|
+
const data = doc.data()
|
|
165
|
+
if (data) {
|
|
166
|
+
this.setState({
|
|
167
|
+
title: data.title,
|
|
168
|
+
url: data.url,
|
|
169
|
+
tag: data.tag,
|
|
170
|
+
})
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
render() {
|
|
175
|
+
return (
|
|
176
|
+
<Card>
|
|
177
|
+
<CardActionArea>
|
|
178
|
+
<CardContent>
|
|
179
|
+
<Typography gutterBottom variant="h5" component="h2">
|
|
180
|
+
{this.state.title}
|
|
181
|
+
</Typography>
|
|
182
|
+
<Typography variant="body2" color="textSecondary" component="p">
|
|
183
|
+
{this.state.url}
|
|
184
|
+
</Typography>
|
|
185
|
+
</CardContent>
|
|
186
|
+
</CardActionArea>
|
|
187
|
+
<Divider />
|
|
188
|
+
<CardActions>
|
|
189
|
+
<Button size="small" color="primary">
|
|
190
|
+
{this.state.tag}
|
|
191
|
+
</Button>
|
|
192
|
+
<Button size="small" color="primary">
|
|
193
|
+
Learn More
|
|
194
|
+
</Button>
|
|
195
|
+
</CardActions>
|
|
196
|
+
</Card>
|
|
197
|
+
)
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
export default ImgMediaCard
|
|
201
|
+
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
|