React.jsでTypeError: Cannot read property 'map' of undefinedと表示される

Question

前提・実現したいこと

コロナのトラッカー作りの最中で「'map'が未定義でプロパティが読み取れない」と表示されたのですが、mapを定義づけにしてプロパティを読み取れるようにするにはどうすればいいのでしょうか?

発生している問題・エラーメッセージ

調べたこと

showDataOnMapのプロパティにアクセスしたかったので、util.jsの42行目に「console.log(showDataOnMap.URL)」と打ち込んでコンソールの方でエラーを確認してみたところ

「Line 43:3: 'data' is not defined no-undef」と表示されました。

恐らくdataが定義されていなく、一連のエラーが発生したのではと考えています。

どこのどの部分にdataを定義づけをすればいいのか勉強不足で分からないので
回答を待つ間、「React 定義」、「JavaScript 定義」といったキーワードでもっと検索してみます。(調べ方間違ってると思うけど...)

該当のソースコード(util.js)

import React from "react";
import numeral from "numeral";
import { Circle, Popup } from "react-leaflet";

const casesTypeColors = {
  cases: {
    hex: "#CC1034",
    rgb: "rgb(204, 16, 52)",
    half_op: "rgba(204, 16, 52, 0.5)",
    multiplier: 800,
  },
  recovered: {
    hex: "#7dd71d",
    rgb: "rgb(125, 215, 29)",
    half_op: "rgba(125, 215, 29, 0.5)",
    multiplier: 1200,
  },
  deaths: {
    hex: "#fb4443",
    rgb: "rgb(251, 68, 67)",
    half_op: "rgba(251, 68, 67, 0.5)",
    multiplier: 2000,
  },
};

export const sortData = (data) => {
  let sortedData = [...data];
  sortedData.sort((a, b) => {
    if (a.cases > b.cases) {
      return -1;
    } else {
      return 1;
    }
  });
  return sortedData;
};

export const prettyPrintStat = (stat) =>
  stat ? `+${numeral(stat).format("0.0a")}` : "+0";

export const showDataOnMap = (data, casesType, country = "cases") =>
  data.map((data, casesType, country) => (
    <Circle
      center={[country.countryInfo.lat, country.countryInfo.long]}
      color={casesTypeColors[casesType].hex}
      fillColor={casesTypeColors[casesType].hex}
      fillOpacity={0.4}
      radius={
        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
      }
    >
      <Popup>
        <div className="info-container">
          <div
            className="info-flag"
            style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
          ></div>
          <div className="info-name">{country.country}</div>
          <div className="info-confirmed">
            Cases: {numeral(country.cases).format("0,0")}
          </div>
          <div className="info-recovered">
            Recovered: {numeral(country.recovered).format("0,0")}
          </div>
          <div className="info-deaths">
            Deaths: {numeral(country.deaths).format("0,0")}
          </div>
        </div>
      </Popup>
    </Circle>
  ));

該当のソースコード(Map.js)

import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";

function Map({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries.casesType)}
      </LeafletMap>
    </div>
  );
}

export default Map;

補足情報（OS/参考記事/作成元動画）

OS Windows10
参考記事
作成元動画

Answer 1

{showDataOnMap(countries.casesType)}は{showDataOnMap(countries, casesType)}の間違いでは？

countries.casesType が undefined なら、showDataOnMap に渡される引数は undefined, undefined, "cases" であり、undefined に map は定義されていないので、エラーになります。

Comments

[obaq_4309]

Map.jsの{showDataOnMap(countries.casesType)}を{showDataOnMap(countries, casesType)}に直してみたところ、「TypeError: Cannot read property 'lat' of undefined」と表示されました。

コンソールの方でも「Warning: Each child in a list should have a unique "key" prop.」と表示されるようになってもう何がなんだか????

[maai]

export const showDataOnMap = (data, casesType, country = "cases") =>
data.map((data, casesType, country) => (
と
center={[country.countryInfo.lat, country.countryInfo.long]}
は見直した方が良さそうです。console.logすると分かりやすいと思います
unique "key" prop.は別の問題なので、一旦上が動いてから調べ直すと良いです

[obaq_4309]

ありがとうございます!
作成元動画の動画を見直してshowDataOnMapを確認しましたが
export const showDataOnMap = (data, casesType = "cases") =>と、なっており、data.mapの方もdata.map((country) => (となっていました。
これでもエラーはまだ残っているのですが、動画内では最終的なエラーについては何も触れていなかったので、エラーをあえて残していたのだと分かりました。おかげさまで無事完成しました。ありがとうございます!