connected to OpenData solar system API for planetary body info

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",

src/App.js

@@ -1,10 +1,28 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useState } from 'react'
 import './App.css';
+import axios from 'axios';
 import Navigation from './components/Navigation';
 import Viewport from './components/Viewport';
 import InfoCard from "./components/InfoCard";
+import { useEffect } from "react";
+import normalizeSolarSystemData from "./functions/normalizeData";
 
 function App() {
+
+  const [data, setData] = useState(null)
+
+  const fetchData = async () => {
+    return axios.get("https://api.le-systeme-solaire.net/rest/bodies/")
+    .then((response) => setData(normalizeSolarSystemData(response.data)))
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [])
+
+  console.log(data)
+
   return (
   <>
     <BrowserRouter>

src/components/InfoCard/index.js

@@ -12,6 +12,8 @@ const InfoCard = () => {
     return navigate('/')
   }
 
+
+
   return (
     <section className="info-card">
       <div className="infocard-title">

src/functions/normalizeData.js

@@ -0,0 +1,12 @@
+const normalizeSolarSystemData = (data) => {
+  let dataObject = {}
+
+  data.bodies.forEach(body => {
+    dataObject[body.englishName] = body
+  })
+
+  return dataObject
+
+}
+
+export default normalizeSolarSystemData;