api call functions as anticipated

src/App.js

@@ -1,5 +1,5 @@
-import ResponseSection from './components/ResponseSection';
 import './App.css';
+import ResponseSection from './components/ResponseSection';
 import { useState } from "react";
 
 function App() {

src/components/ResponseSection.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 export default function ResponseSection({ userInput }) {
-    let secret = process.env.API_SECRET;
+    let secret = process.env.REACT_APP_API_SECRET;
 
     const [resCount, setResCount] = useState(1);
     const [contents, setContents] = useState([
@@ -18,13 +18,23 @@ export default function ResponseSection({ userInput }) {
         </div>
     ]);
 
-    const help = () => {
-        console.log(process.env.API_SECRET);
-    }
-
     const addNewResponse = async () => {
+        let data = { prompt: userInput };
+
+        let result = await fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${secret}`
+            },
+            body: JSON.stringify(data)
+        }).then(res => res.json());
+
+        let AIresponse = result.choices[0].text;
+        
         let newState = contents;
-        let newCount = newState.unshift(
+        let newCount;
+        AIresponse && (newCount = newState.unshift(
             <div key={`response-${resCount + 1}`} className="single-response-block">
                 <div className="response-line">
                     <p>Prompt:</p>
@@ -33,33 +43,21 @@ export default function ResponseSection({ userInput }) {
 
                 <div className="response-line">
                     <p>Response:</p>
-                    <p>.......</p>
+                    <p>{AIresponse}</p>
                 </div>
             </div>
-        );
+        ));
 
         setResCount(newCount);
         setContents(newState);
-
-        let data = { prompt: userInput };
-
-        await fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${secret}`
-            },
-            body: JSON.stringify(data)
-        }).then(x => console.log(x));
     }
 
     return (
-        <>
+        <section>
             <button onClick={addNewResponse}>Submit</button>
-        <button onClick={help}>Help</button>
             <section id="responses">
                 {contents}
             </section>
-        </>
+        </section>
     )
 }