properly renders new responses

src/App.css

@@ -62,6 +62,10 @@ button:active {
   flex-direction: column;
 }
 
+select {
+  border-radius: 5px;
+}
+
 /* Response section styles */
 
 #responses {

src/App.js

@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef, useEffect } from "react";
+import { useCallback, useState, useRef } from "react";
 import ResponseSection from './components/ResponseSection';
 import './App.css';
 import SubmitSection from "./components/SubmitSection";
@@ -7,7 +7,7 @@ function App() {
   const [userInput, setUserInput] = useState('');
   const [response, setResponse] = useState(null);
 
-  const responseRef = useRef(null);
+  const responseRef = useRef();
 
   const promptCallback = useCallback((userPrompt) => {
     setUserInput(userPrompt);
@@ -17,10 +17,6 @@ function App() {
     setResponse(APIresponse);
   }, []);
 
-  useEffect(() => {
-    response && responseRef.current();
-  }, [response]);
-
   return (
     <div className="App">
       <h1 id="page-title">Fun with AI</h1>
@@ -33,7 +29,7 @@ function App() {
       </section>
 
       <SubmitSection userInput={userInput} promptCallback={promptCallback} responseCallback={responseCallback} />
-      <ResponseSection responseRef={responseRef} userInput={userInput} response={response} />
+      <ResponseSection userInput={userInput} response={response} responseRef={responseRef} />
     </div>
   );
 }

src/components/GPT3.js

@@ -0,0 +1,18 @@
+export const getResponse = async (input) => {
+    let data = { prompt: input };
+
+    let response = await fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${process.env.REACT_APP_API_SECRET}`
+        },
+        body: JSON.stringify(data)
+    }).then(res => res.json());
+
+    console.log(response);
+
+    let text = response.choices[0].text;
+
+    return text;
+}

src/components/ResponseSection.js

@@ -1,42 +1,47 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function ResponseSection({ userInput, response, responseRef }) {
     const [resCount, setResCount] = useState(1);
-
-    const [contents, setContents] = useState([
-        <div key="response-1" className="single-response-block">
-            <p className="response-component label prompt-label">Prompt:</p>
-            <p className="response-component prompt">Your prompt will appear here...</p>
-            <p className="response-component label response-label">Response:</p>
-            <p className="response-component response">... and the AI response will appear here!</p>
-        </div>
-    ]);
-
-    const appendResponse = () => {
-        let newState = contents;
-        let newCount;
-        response && (newCount = setContents(newState.unshift(
-            <div key={`response-${resCount+1}`} className="single-response-block">
-                <p className="response-component label prompt-label">Prompt:</p>
-                <p className="response-component prompt">{userInput}</p>
-                <p className="response-component label response-label">Response:</p>
-                <p className="response-component response">{response}</p>
-            </div>
-        )));
-
-        setResCount(newCount);
-
-        console.log(contents);
-    }
+    const [contents, setContents] = useState([]);
+    const [responseToRender, setResponseToRender] = useState(null);
 
     useEffect(() => {
-        responseRef.current = appendResponse;
-    }, []);
+        response && setResponseToRender(response);
+    }, [response]);
+
+    useEffect(() => {
+        if (responseToRender) {
+            setContents((prev) => {
+                return [
+                    <div key={`response-${resCount+1}`} className="single-response-block">
+                        <p className="response-component label prompt-label">Prompt:</p>
+                        <p className="response-component prompt">{userInput}</p>
+                        <p className="response-component label response-label">Response:</p>
+                        <p className="response-component response">{responseToRender}</p>
+                    </div>,
+                ...prev]
+            });
+            setResCount(resCount + 1);
+            setResponseToRender(null);
+        }
+    }, [responseToRender, contents, resCount, userInput]);
+
+    useEffect(() => {
+        console.log(contents);
+    }, [contents]);
     
     return (
         <section id="responses">
             <h2>Responses</h2>
-            {contents}
+            <div className="contents">
+                {contents.length > 0 ? contents : null}
+                <div key="response-1" className="single-response-block">
+                    <p className="response-component label prompt-label">Prompt:</p>
+                    <p className="response-component prompt">Your prompt will appear here...</p>
+                    <p className="response-component label response-label">Response:</p>
+                    <p className="response-component response">... and the AI response will appear here!</p>
+                </div>
+            </div>
         </section>
-    )
-}
+    );
+}

src/components/SubmitSection.js

@@ -1,16 +1,9 @@
-export default function SubmitSection({ promptCallback, userInput, responseCallback }) {
-    const getResponse = async () => {
-        let data = { prompt: userInput };
+import { getResponse } from "./GPT3.js";
 
-        await fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${process.env.REACT_APP_API_SECRET}`
-            },
-            body: JSON.stringify(data)
-        }).then(res => res.json())
-        .then(x => responseCallback(x.choices[0].text));
+export default function SubmitSection({ promptCallback, userInput, responseCallback }) {
+    const createNewEntry = async () => {
+        if (!userInput) return;
+        await getResponse(userInput).then((x) => responseCallback(x));
     }
 
     return (
@@ -24,7 +17,7 @@ export default function SubmitSection({ promptCallback, userInput, responseCallb
                     <option value="Tell me a good joke.">Tell me a good joke.</option>
                 </select>
             </div>
-            <button onClick={getResponse}>Submit</button>
+            <button onClick={createNewEntry}>Submit</button>
         </div>
     )
 }