update the code to use components for loading the image

KrothuTheCoder · Feb 27, 2024 · 90f9e76 · 90f9e76
1 parent ee4206b
commit 90f9e76
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -2,8 +2,7 @@
     "name": "react-api-demo",
     "version": "1.0.0",
     "description": "A React application that calls a C# API backend",
-    "main": "src/index.js",
-    "script": "./src/index.js",
+
     "scripts": {
         "start": "node app.js",
         "build": "react-scripts build",

diff --git a/public/index.html b/public/index.html
@@ -3,12 +3,15 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="http://localhost:3000/src/index.js"></script>
     <title>Simple React Page</title>
 </head>
 <body>
-<img src="images/donkey.jpg">Daddy's Donkey</img>
+
+<!-- <img src="images/donkey.jpg">Daddy's Donkey!</img> -->
+<br/><br?>
 <div id="root"></div>
-Inky Pinky Ponky<br/>
+<!-- Inky Pinky Ponky<br/>
 Daddy bought a donkey<br/>
 Donkey died<br/>
 Daddy cried<br/>
@@ -31,7 +34,7 @@
                 .catch(error => console.error('Error fetching data:', error));
         });
 
-</script>
+</script> -->
 
 
 </body>

diff --git a/src/donkey.js b/src/donkey.js
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+const ImageComponent = () => {
+
+  return (
+    <div>
+    Inky Pinky Ponky<br/>
+    Daddy bought a donkey<br/>
+    Donkey died<br/>
+    Daddy cried<br/>
+    Inky Pinky Ponky<br/>
+   <img src='./images/donkey.jpg'/>
+    </div>
+  );
+};
+
+export default ImageComponent;
diff --git a/src/go.js b/src/go.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+const DataFetchComponent = () => {
+  const [apiData, setApiData] = useState('');
+
+  const fetchData = async () => {
+
+    fetch('https://fd-sandbox.hakabo.com/api/data', {
+        method: 'GET',
+        headers: {
+            'Ocp-Apim-Subscription-Key': '1193b86901a44fa181cb016bfd85089f'
+        },
+    })
+        .then(response => response.json())
+        .then(data => {
+            setApiData(data); 
+        })
+        .catch(error => console.error('Error fetching data:', error));
+
+  };
+
+  return (
+    <div>
+      <button onClick={fetchData}>GO!</button>
+      {apiData && <p>{apiData}</p>}
+    </div>
+  );
+};
+
+export default DataFetchComponent;
diff --git a/src/images/donkey.jpg b/src/images/donkey.jpg
diff --git a/src/index.js b/src/index.js
@@ -1,42 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client'
+import DonkeyComponent from './donkey';
+import DataFetchComponent from './go'; // Import the new compon
+// class Index extends React.Component {
+//   constructor() {
+//     super();
+//     this.state = {
+//       data: null,
+//     };
+//   }
 
-class Index extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: null,
-    };
-  }
-
-  componentDidMount() {
-    // Make API call with an extra header
-    fetch('https://fd-sandbox.hakabo.com/api/data', {
-      method: 'GET',
-      headers: {
-        'Ocp-Apim-Subscription-Key': '1193b86901a44fa181cb016bfd85089f'
-      },
-    })
-      .then(response => response.json())
-      .then(data => this.setState({ data }))
-      .catch(error => console.error('Error fetching data:', error));
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Hello, React!</h1>
-        {this.state.data ? (
-          <div>
-            <p>Data from API:</p>
-            <pre>{JSON.stringify(this.state.data, null, 2)}</pre>
-          </div>
-        ) : (
-          <p>Loading data...</p>
-        )}
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Index />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <DonkeyComponent />
+    <DataFetchComponent />
+  </React.StrictMode>
+);