質問編集履歴

文法の修正をいたしました

2020/08/08 01:07

投稿

obaq_4309

スコア10

test CHANGED Viewed

	@@ -1 +1 @@
1	- React.jsにて~~未定義のプロパティ~~ ~~'rep~~lace' ~~を読み~~と~~れませんと~~いうエラー~~で困って~~ます
1	+ React.jsにてWarning: Each child in a list should have a unique "key" prop.というエラーが発生しました。

test CHANGED Viewed

@@ -1,22 +1,14 @@
-### 前提・実現したいこと
-コロナ感染のトラッカーを作っているのですが、感染者数推移のグラフを作るあたりから画面にグラフが表示されなくなり、ほぼリアルタイムでコロナ感染数がわかるAPIとマップを作る頃には今まで作っていたものが画面に表示されなくなりました。
-実現したいことはエラーを解決して推移グラフと感染マップが表示されるようにしたいです。
+コロナ感染のトラッカーを作る過程でタイトルのようなエラーが発生しました。
+DeepLにて翻訳をかけてみたら「警告。リスト内の各子は一意の "キー" プロップを持つ必要があります。」
+と出てきたので、Reaactの公式リファレンスの方で「リストとkey」、「レンダープロップ」について確認してみましたが、自分のエラーに対してどういった風にその知識を転換させ、エラー解決に持ち込めるのか分からなくなってしまったので質問させていただきました。
 ### エラー(画像)
-![イメージ説明](dabd7193c108e3deccdff97b0ff7be32.png)
+![イメージ説明](9b159c0efe352c3d440321bcd7b780e2.png)
-![イメージ説明](65639208c3ad37f63b530c6ee24a414f.png)
-![イメージ説明](e2d97b75c44ed7c97a24ae073836e0c1.png)
+![イメージ説明](31733ec13db3924e3f7c65995e53899c.png)
 ### 該当のソースコード(App.js)
@@ -130,7 +122,7 @@
-  console.log((casesType));
+  console.log(casesType);
@@ -204,8 +196,6 @@
         </div>
         <div className="app__stats">
           <InfoBox
@@ -280,9 +270,9 @@
             <Table countries={tableData} />
-            <h3 className="app__graphTitle">Worldwide new {casesType}</h3>
+            <h3>Worldwide new {casesType}</h3>
-            <LineGraph className="app__graph" casesType={casesType} />
+            <LineGraph casesType={casesType} />
           </div>
@@ -304,128 +294,252 @@
-### 該当のソースコード(InfoBox.js)
+### 該当のソースコード(Table.js)
-```
+```
-import React from 'react';
+import React from "react";
-import "./InfoBox.css";
+import "./Table.css";
-import { Card, CardContent, Typography } from "@material-ui/core";
+import numeral from "numeral";
-function InfoBox({ title, cases, total, active, isRed, ...props }) {
-  console.log(title, active);
+function Table({ countries }) {
   return (
+    <div className="table">
+      {countries.map((country) => (
+        <tr>
+          <td>{country.country}</td>
+          <td>
+            <strong>{numeral(country.cases).format("0,0")}</strong>
+          </td>
+        </tr>
+      ))}
+    </div>
+  );
+}
+export default Table;
+```
+###該当のソースコード(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;
+```
+###該当のソースコード(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 = "cases") =>
+  data.map((country) => (
-    <Card
+    <Circle
+      center={[country.countryInfo.lat, country.countryInfo.long]}
+      color={casesTypeColors[casesType].hex}
+      fillColor={casesTypeColors[casesType].hex}
-      onClick={props.onClick}
+      fillOpacity={0.4}
+      radius={
-      className={`infoBox ${active && "infoBox--selected"} ${
+        Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier
-        isRed && "infoBox--red"
-      }`}
+      }
     >
-      <CardContent>
-        <Typography color="textSecondary" gutterBottom>
-          {title}
-        </Typography>
-        <h2 className={`infoBox__cases ${!isRed && "infoBox__cases--green"}`}>
-          {cases}
-        </h2>
-        <Typography className="infoBox__total" color="textSecondary">
-          {total} Total
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-}
-export default InfoBox;
-```
-### 該当のソースコード(Map.js)
-```
-import React from "react";
-import "./Map.css";
-import { Map as LeafleMap, TileLayer } from "react-leaflet";
-import { showDataOnmap } from "./util";
-function Map({ countries, casesType, center, zoom }) {
-  return (
-    <div className="map">
-      <LeafleMap center={center} zoom={zoom}>
-        <TileLayer
-          uurl="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        />
-        {showDataOnmap(countries, casesType)}
-      </LeafleMap>
-    </div>
-  );
-}
-export default Map;
-```
-### 補足情報（OS/参考動画/GitHubのソースコード）
+      <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>
+  ));
+```
+### 補足情報（OS/参考動画/GitHub/react公式）
 OS Windows10
 [学習元動画](https://www.youtube.com/watch?v=cF3pIMJUZxM&feature=youtu.be&t=12317)
 [GitHub](https://github.com/CleverProgrammers/react-covid-tracker)
+[React公式](https://ja.reactjs.org/)

エラー文を追加しました

2020/08/08 01:07

投稿

obaq_4309

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,6 +14,10 @@
 ![イメージ説明](65639208c3ad37f63b530c6ee24a414f.png)
+![イメージ説明](e2d97b75c44ed7c97a24ae073836e0c1.png)
 ### 該当のソースコード(App.js)
 ```
@@ -298,6 +302,8 @@
 ```
 ### 該当のソースコード(InfoBox.js)
 ```
@@ -366,6 +372,8 @@
 ```
 ### 該当のソースコード(Map.js)
 ```

Map.jsのコードを追加しました

2020/08/07 16:19

投稿

obaq_4309

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -366,6 +366,54 @@
 ```
+### 該当のソースコード(Map.js)
+```
+import React from "react";
+import "./Map.css";
+import { Map as LeafleMap, TileLayer } from "react-leaflet";
+import { showDataOnmap } from "./util";
+function Map({ countries, casesType, center, zoom }) {
+  return (
+    <div className="map">
+      <LeafleMap center={center} zoom={zoom}>
+        <TileLayer
+          uurl="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        />
+        {showDataOnmap(countries, casesType)}
+      </LeafleMap>
+    </div>
+  );
+}
+export default Map;
+```
 ### 補足情報（OS/参考動画/GitHubのソースコード）
 OS Windows10

文法の修正をいたしました

2020/08/07 09:13

投稿

obaq_4309

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,6 +6,14 @@
 実現したいことはエラーを解決して推移グラフと感染マップが表示されるようにしたいです。
+### エラー(画像)
+![イメージ説明](dabd7193c108e3deccdff97b0ff7be32.png)
+![イメージ説明](65639208c3ad37f63b530c6ee24a414f.png)
 ### 該当のソースコード(App.js)
 ```

タイトルに誤字があったので訂正いたしました

2020/08/07 09:01

投稿

obaq_4309

スコア10

test CHANGED Viewed

	@@ -1 +1 @@
1	- Reactjsにて未定義のプロパティ 'replace' を読みとれませんというエラーで困ってます
1	+ React.jsにて未定義のプロパティ 'replace' を読みとれませんというエラーで困ってます

test CHANGED Viewed

File without changes

文法の修正をいたしました

2020/08/07 08:59

投稿

obaq_4309

スコア10

test CHANGED Viewed

	@@ -1 +1 @@
1	- Reactjsにて未定義のプロパティ 'replace' を読みとれませんと~~表示され~~ます
1	+ Reactjsにて未定義のプロパティ 'replace' を読みとれませんというエラーで困ってます

test CHANGED Viewed

@@ -1,8 +1,10 @@
-### 発生している問題・エラーメッセージ
+### 前提・実現したいこと
+コロナ感染のトラッカーを作っているのですが、感染者数推移のグラフを作るあたりから画面にグラフが表示されなくなり、ほぼリアルタイムでコロナ感染数がわかるAPIとマップを作る頃には今まで作っていたものが画面に表示されなくなりました。
-![イメージ説明](f6e846659cb9db763ac61d588f3f21a7.png)
+実現したいことはエラーを解決して推移グラフと感染マップが表示されるようにしたいです。
-![イメージ説明](4dcafb808446e92580c18d4199ce7828.png)
 ### 該当のソースコード(App.js)
@@ -360,6 +362,6 @@
 OS Windows10
-[参考動画](https://www.youtube.com/watch?v=cF3pIMJUZxM&feature=youtu.be&t=12317)
+[学習元動画](https://www.youtube.com/watch?v=cF3pIMJUZxM&feature=youtu.be&t=12317)
 [GitHub](https://github.com/CleverProgrammers/react-covid-tracker)