MongoDBに登録した情報を表示させたいが、TypeErrorが出る

JavaScript
1require('dotenv').config()
2const express = require('express');
3const app = express();
4const PORT = 3000;
5const Dragon = require('./models/dragon');
6const mongoose = require('mongoose');
7mongoose.connect(process.env.MONGO_URI, {
8  useNewUrlParser: true,
9  useUnifiedTopology: true,
10  useCreateIndex: true,
11  useFindAndModify: false
12})
13mongoose.connection.once('open', () => {
14  console.log('connected to mongo')
15})
16
17app.set('view engine', 'jsx');
18app.engine('jsx', require('express-react-views').createEngine())
19
20app.use((req, res, next) => {
21  console.log('**********************')
22  console.log('***********Middleware checking in***********')
23  console.log('I run before all routes')
24  console.log('**********************')
25  next()
26})
27app.use(express.urlencoded({ extended: true }))
28
29
30app.get('/', (req, res) => {
31  res.send('Welcome to the Dragon App!')
32})
33
34/*
35Index
36*/
37app.get('/dragon', (req, res) => {
38  Dragon.find({}, (err, foundDragon)=>{
39    if(err){
40      res.status(404).send({
41          msg: err.message
42      })
43    } else {
44      res.render('Index', {
45        Dragon: foundDragon
46      })
47    }
48  })
49
50})
51
52/*
53*/
54app.get('/dragon/new', (req, res) => {
55  res.render('New')
56})
57
58app.get('/dragon/:id', (req, res) => {
59  res.render('Show', {
60    Dragon: Dragon[req.params.id]
61  });
62})
63
64/*
65Create
66*/
67app.post('/dragon', (req, res) =>{
68  Dragon.create(req.body, (err, createdDragon ) => {
69    if(err){
70    res.status(404).send({
71      msg: err.message
72    })
73  } else {
74    console.log(createdDragon);
75    res.redirect('/dragon')
76  }
77})
78})
79
80/*
81Show
82*/
83app.get('/dragon/:id', (req, res) => {
84  Dragon.findById(req.params.id, (err, foundDragon)=>{
85    if(err){
86      res.status(404).send({
87          msg: err.message
88      })
89    } else {
90      res.render('Show', {
91        dragon: foundDragon
92      })
93    }
94  })
95})
96
97app.listen(PORT, () => {
98  console.log('We in the building', PORT)
99})
100

Show.JSXファイル

JavaScript
1const React = require('react');
2
3const myStyle = {
4color: '#ffffff',
5backgroundColor: '#000000',
6
7};
8const cap = {
9  textTransform: 'capitalize',
10}
11
12class Show extends React.Component {
13  render(){
14    const dragon = this.props.Dragon;
15    return (
16      <div style={myStyle}>
17        <h1>Gotta Catch 'Em All</h1>
18         <h2 style={cap}>{dragon.name}</h2>
19         <img src={dragon.img}></img>
20         /*
21         <img src={dragon.img + '.jpg'}></img>
22         */
23        <br/>
24        <a href='/dragon'><font color="silver">back</font></a>
25        </div>
26    )
27  }
28}
29module.exports = Show;
30

JavaScript
1const React = require('react')
2const myStyle = {
3color: '#ffffff',
4backgroundColor: '#000000',
5};
6const cap = {
7  textTransform: 'capitalize',
8  color: 'silver',
9}
10
11class Index extends React.Component {
12  render(){
13    const dragon = this.props.Dragon;
14    return (
15      <div style={myStyle}>
16        <h1>See All The Dragon!</h1>
17        <ul>
18          {
19            dragon.map((dragon)=>{
20              return(
21                <li key={dragon._id}>
22                <a href={`/dragon/${dragon._id}`}><font color="silver">{dragon.name}</font></a>
23                </li>
24              )
25            })
26          }
27        </ul>
28      </div>
29    )
30  }
31}
32
33module.exports = Index;
34