How do I save responses from an API to a state so that I can display old searches/responses?-CodePudding

Here's what I'm trying to do: First, I want to display the response I receive from the API (I can do that), but then I want to display the previous prompts and responses from prior calls to the API.

import { useEffect, useState } from "react";
import Navbar from "./components/navbar/Navbar";
import Form from "./components/form/Form";
import Ideas from "./pages/Ideas";
import "./app.scss";

const { Configuration, OpenAIApi } = require("openai");

export default function App() {
 
  const [companyType, setCompanyType] = useState("");
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");
  const [list, setList] = useState({});


  useEffect(() => {
    console.log("use effect ran");
  }, []);

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_API_KEY,
  });

  const openai = new OpenAIApi(configuration);

  const searchForProductIdeas = (event) => {
    event.preventDefault();
    openai
      .createCompletion("text-davinci-002", {
        prompt: `List new product ideas for a ${companyType} company.`,
        temperature: 1,
        max_tokens: 256,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
      })

      .then((response) => {
        
        // creates a variable to store response in
        const idea = response.data.choices[0].text;
        //sets the prompt
        setPrompt(`List new product ideas for a ${companyType} company.`);
        //sets the response
        setResponse(idea);
        // set the previous prompts and responses
        setList({...prompt, ...idea})

      });
  };
  return (
    <div className="app">
      <Navbar />
      
      <div>{prompt}</div>
      <div>{response}</div>
      <div>{list}</div>
    </div>
  );
}

Any and all help is welcome. Also wondering if I need to have axios for openai API calls?

CodePudding user response：

You probably want to store the previous search term and result pairs in an array. Move the current prompt and response state into the list state array when a new request is made.

Example:

export default function App() {
  const [companyType, setCompanyType] = useState("");
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");
  const [list, setList] = useState([]); // <-- array

  ...

  const searchForProductIdeas = (event) => {
    event.preventDefault();

    openai
      .createCompletion("text-davinci-002", {
        ...
      })
      .then((response) => {
        // creates a variable to store response in
        const idea = response.data.choices[0].text;
        //sets the prompt
        setPrompt(`List new product ideas for a ${companyType} company.`);

        //sets the response
        setResponse(idea);

        // set the previous prompts and responses
        if (prompt && response) {
          setList(list => [...list, { prompt, response }]); // <-- append into new array
        }
      });
  };

  return (
    <div className="app">
      <Navbar />
      
      <div>{prompt}</div>
      <div>{response}</div>
      <div>
        <ul>
          <p>Previous prompts and responses</p>
          {list.map(({ prompt, response }, i) => ( // <-- map previous entries
            <li key={i}>
              <p>{prompt}</p>
              <p>{response}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

CodePudding user response：

So i assume when i look at your code that right now the line :

<div>{list}</div>

Is not working since your question is how do i show the list of old requests.

What i would do is change the list to be an array of object instead :

const [list, setList] = useState([]);

And i would add your Prompt and response as an object inside. Something along the line of :

setList([
...list,
{ 
prompt: your_prompt_here,
response: your_response_here
}]);

And to render that you would use the map function :

{
list.map((item) => (
<>
   <div> item.prompt </div
   <div> item.response </div>
</>
))}``