React JSX 「Cannot read property」エラー

Question

Javascript/React 学習中です。

index.jsxファイルのmapの行で下記エラーとなります。
「TypeError: Cannot read property 'map' of undefined」

サンプルコードからクラスを自分の勉強用にpokemonに変更して作成しています。

いくつか試してみたのですが、エラー原因が自分でわかりませんでした。
ご指摘または、確認すべき場所をアドバイス頂けますと幸いです。

index.jsxファイル

const React = require('react')

const myStyle = {
color: '#ffffff',
backgroundColor: '#000000',
};
const cap = {
  textTransform: 'capitalize',
  color: 'silver',
}

class Index extends React.Component {
  render(){
    const pokemon = this.props.pokemon;
    return (
      <div style={myStyle}>
        <h1>See All The Pokemon!</h1>
        <ul>
          {
            pokemon.map((pokemon, i) => {
              return(
                <li style={cap}>
                  <a href={`/pokemon/${i}`}><font color="silver">{`${i}`} {pokemon.name}</font></a>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

module.exports = Index;

server.jsファイル

require('dotenv').config()

const express = require('express');
const app = express();
const PORT = 3000;
const Pokemon = require('./models/pokemon');
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false
})
mongoose.connection.once('open', () => {
  console.log('connected to mongo')
})

app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine())

app.get('/', (req, res) => {
  res.send('Welcome to the Pokemon App!')
})

app.get('/pokemon', (req, res) => {
  res.render('Index', {Pokemon: Pokemon});
})

app.get('/pokemon/new', (req, res) => {
  res.render('New')
})

app.get('/pokemon/:id', (req, res) => {
  res.render('Show', {
    pokemon: pokemon[req.params.id]
  });
})

app.listen(PORT, () => {
  console.log('connected', PORT)
})

pokemon.js　ファイル

const { Schema, model } = require('mongoose');
const pokemonSchema = new Schema({
  name: { type: String, required: true, unique: true },
  img: { type: String, required: true },

});
const Pokemon = model('Pokemon', pokemonSchema);
module.exports = Pokemon;

Answer 1

Propsとして渡しているもの/期待しているものの名称が一致していません。

/*
 server.jsより
 Pokemonというプロパティで渡している
*/
  res.render('Index', {Pokemon: Pokemon});

/*
 Index.jsxより
 pokemonというプロパティを期待している
*/
    const pokemon = this.props.pokemon;

大文字小文字を完全一致させる必要があります