Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to receive data from an async function in a different component [Next JS]

i am trying to use the new Gemini api, i am using server actions to get the user message from the input and sending that message to the gemini function which returns the response as text.

"use server";

import runChat from "@/utils/gemini";

export async function handleSubmit(formData) {
  const prompt = formData.get("promptInput");
  const res = await runChat(prompt);
  return res;
}

Now i am trying to return the response from the handleSubmit function and get the text in an html div

import React from 'react'

const PromptBox = () => {
  return (
    <div className="promptBox h-[80vh] bg-[#1E1E1E] m-4 rounded-lg p-4 font-medium">
      // I WANT THE RESPONSE TEXT TO COME HERE
    </div>
  );
}

export default PromptBox

This is what ive tried but its not working.

import { handleSubmit } from '@/actions/action';
import React from 'react'

const PromptBox = () => {
  const response = handleSubmit
  console.log(response)
  return (
    <div className="promptBox h-[80vh] bg-[#1E1E1E] m-4 rounded-lg p-4 font-medium">
      {response}
    </div>
  );
}

export default PromptBox

im very sorry if there are any stupid mistakes im very new to react/nextJs

Tags:

2

Answers


  1. 0

    Use the state in the component. Set the response to the state and use that state in the html to display the response.

    Login or Signup to reply.
  2. 0

    to build on Muhammad Taha’s response, your PromptBox should be managing the data as state. an example of what that could look like:

    const PromptBox = () => {
    // useState hook will let the PromptBox retain the response
    const [data, setData] = useState();

    // useEffect will call for data when component loads.  it will re-run when the contents of the array passed into the useEffect change.  in this case, since the array is empty, this useEffect will run only once.
    useEffect(() => {
        getInitialData();
    }, [])

    // this is the logic that will fetch the data and store it in the state we set up before.
    const getInitialData = async () => {
        // don't you need to pass formData into handleSubmit?  this is likely another issue you'll need to address
        const result = await handleSubmit();
        // store the response
        setData(result);
    }
    return (
        <div className="promptBox h-[80vh] bg-[#1E1E1E] m-4 rounded-lg p-4 font-medium">
            {/* display response if exists, else inform the user */}
            {data ?? 'fetching data'}
        </div>
    );
}

    you are also not actually calling the "handleSubmit" function in your component. instead of "handleSubmit", try "handleSubmit()". and it also will require you to pass in a formData object, according to your own definition.

    the react docs are pretty good about covering the basics, if this all didn’t make sense.
    https://react.dev/reference/react/useState

    good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search