Add CodeSvg component and fetch data only once

gatsby/components/BugsTest.jsx

@@ -1,18 +1,23 @@
 import React, { useState, useEffect } from "react"
+import CodeSvg from "./CodeSvg"
 
 export default function BugsTest(props) {
  const [names, setNames] = useState([])
+ const [dataFetched, setDataFetched] = useState(false);
 
  useEffect(() => {
  const fetchData = async () => {
- const data = await fetch("/data.json").then(response => response.json())
- console.log(data)
- if (data?.length) {
- setNames(data)
+ if (!dataFetched) {
+ const data = await fetch("/data.json").then((response) => response.json());
+ if (data?.length) {
+ setNames(data);
+ setDataFetched(true);
+ }
  }
- }
- fetchData()
- }, [data])
+ };
+
+ fetchData();
+ }, [dataFetched]);
 
  return (
  <>
@@ -53,9 +58,11 @@ export default function BugsTest(props) {
  </thead>
 
  <tbody>
- {names?.forEach((n, i) => {
+ {names?.map((n, i) => {
  return (
- <tr>
+ <tr
+ key={n?.first}
+ >
  <td>{n?.first}</td>
  <td>{n?.last}</td>
  </tr>
@@ -68,7 +75,7 @@ export default function BugsTest(props) {
  <hr />
  <h2>Test SVG</h2>
  <div>
- <img src="/code.svg" />
+ <CodeSvg style={{ fill: "#038cfc" }} />
  </div>
  </>
  )

gatsby/components/CodeSvg.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+const CodeSvg = () => {
+
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+ <path fill="#038cfc" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/>
+ </svg>
+ )
+}
+
+export default CodeSvg