conditional rendering

src/App.css

@@ -72,7 +72,7 @@ button:active {
   display: grid;
   grid-template: "prompt-label prompt" 1fr
                  "response-label response" 1fr
-                 / auto;
+                 / 1fr 4fr;
   background-color: lightgray;
   border-radius: 12px;
   padding: 0 1rem;

src/App.js

@@ -1,11 +1,25 @@
-import { useState } from "react";
+import { useCallback, useState, useRef, useEffect } from "react";
 import ResponseSection from './components/ResponseSection';
 import './App.css';
+import SubmitSection from "./components/SubmitSection";
 
 function App() {
   const [userInput, setUserInput] = useState('');
+  const [response, setResponse] = useState(null);
 
-  const userPrompt = null;
+  const responseRef = useRef(null);
+
+  const promptCallback = useCallback((userPrompt) => {
+    setUserInput(userPrompt);
+  }, []);
+
+  const responseCallback = useCallback((APIresponse) => {
+    setResponse(APIresponse);
+  }, []);
+
+  useEffect(() => {
+    response && responseRef.current();
+  }, [response]);
 
   return (
     <div className="App">
@@ -14,11 +28,12 @@ function App() {
       <section id="input-section">
         <form>
           <label htmlFor='user-prompt'>Enter prompt</label>
-          <textarea id="user-prompt" value={userPrompt} onChange={(e) => setUserInput(e.target.value)}></textarea>
+          <textarea id="user-prompt" value={userInput} onChange={(e) => setUserInput(e.target.value)}></textarea>
         </form>
       </section>
 
-      <ResponseSection userInput={userInput} prompt={userPrompt}/>
+      <SubmitSection userInput={userInput} promptCallback={promptCallback} responseCallback={responseCallback} />
+      <ResponseSection responseRef={responseRef} userInput={userInput} response={response} />
     </div>
   );
 }

src/components/ResponseSection.js

@@ -1,9 +1,8 @@
-import { useState } from "react";
-
-export default function ResponseSection({ userPrompt, userInput }) {
-    let secret = process.env.REACT_APP_API_SECRET;
+import { useEffect, useState } 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>
@@ -13,54 +12,31 @@ export default function ResponseSection({ userPrompt, userInput }) {
         </div>
     ]);
 
-    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;
-        
+    const appendResponse = () => {
         let newState = contents;
         let newCount;
-        AIresponse && (newCount = newState.unshift(
-            <div key={`response-${resCount + 1}`} className="single-response-block">
+        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">{AIresponse}</p>
+                <p className="response-component response">{response}</p>
             </div>
-        ));
+        )));
 
         setResCount(newCount);
-        setContents(newState);
+
+        console.log(contents);
     }
 
+    useEffect(() => {
+        responseRef.current = appendResponse;
+    }, []);
+    
     return (
-        <section>
-            <div className="submit">
-                <div className="preset-box">
-                    <label htmlFor="presets">Feeling stuck? Choose from some pre-written prompts:</label>
-                    <select name="presets" id="presets" onChange={(e) => userPrompt = e.target.value}>
-                        <option value="preset-1">What's your favorite color?</option>
-                        <option value="preset-2">Tell me about your best friend.</option>
-                        <option value="preset-3">What do you dream about?</option>
-                        <option value="preset-4">Tell me a good joke.</option>
-                    </select>
-                </div>
-                <button onClick={addNewResponse}>Submit</button>
-            </div>
-
-            <section id="responses">
-                <h2>Responses</h2>
-                {contents}
-            </section>
+        <section id="responses">
+            <h2>Responses</h2>
+            {contents}
         </section>
     )
 }

src/components/SubmitSection.js

@@ -0,0 +1,30 @@
+export default function SubmitSection({ promptCallback, userInput, responseCallback }) {
+    const getResponse = async () => {
+        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 ${process.env.REACT_APP_API_SECRET}`
+            },
+            body: JSON.stringify(data)
+        }).then(res => res.json())
+        .then(x => responseCallback(x.choices[0].text));
+    }
+
+    return (
+        <div className="submit">
+            <div className="preset-box">
+                <label htmlFor="presets">Feeling stuck? Choose from some pre-written prompts:</label>
+                <select name="presets" id="presets" onChange={(e) => promptCallback(e.target.value)}>
+                    <option value="What's your favorite color?">What's your favorite color?</option>
+                    <option value="Tell me about your best friend.">Tell me about your best friend.</option>
+                    <option value="What do you dream about?">What do you dream about?</option>
+                    <option value="Tell me a good joke.">Tell me a good joke.</option>
+                </select>
+            </div>
+            <button onClick={getResponse}>Submit</button>
+        </div>
+    )
+}