Next.js Discord

Discord Forum

passed function is not a function

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
parent function:

"use client";

import styles from './questionInput.module.css';
import React, {useState} from "react";
import Upload from "@/components/upload";
import Voice from "@/components/voice";

const QuestionInput = ({addToInputList, addToResponseList}) => {

    const [question, setQuestion] = useState("");

    const setVoiceInput = (voice) => {
        setQuestion(voice)
    }
    

    const handleChange = (event) => {
        setQuestion(event.target.value);
    };

    const addInput = (input) => {
        addToInputList(input);

    };

    const addResponse = (response) => {
        addToResponseList(response);
    }


    const handleSubmit = async (event) => {
        event.preventDefault();

        addInput(question)

        const fetchData = async () => {
            try {
                const url = "/api/ask-gpt";
                const response = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({question}),
                });

                if (!response.ok) {
                    throw new Error("Request failed with status: " + response.status);
                }


                const data = await response.json();
                addResponse(data)

            } catch (error) {
                console.error("Error fetching data:", error);

            }
        };

        await fetchData();

        setQuestion("");
    };


    return (
        <div className={styles.main}>

            <Upload/>
            <Voice setVoiceInput={setVoiceInput}/>

            <form onSubmit={handleSubmit} className={styles.container}>
                <input type="text" value={question} onChange={handleChange}
                       placeholder={"Ask a question about your CSV."} className={styles.input}/>
            </form>
        </div>
    );
};

export default QuestionInput;

5 Replies

Masai LionOP
child function:
"use client"

import 'regenerator-runtime/runtime'
import React, {useEffect, useState} from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const Voice = ({setVoiceInput}) => {

    console.log(setVoiceInput)

    const [speechRecognitionSupported, setSpeechRecognitionSupported] = useState(null)

    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    useEffect(() => {
        setSpeechRecognitionSupported(browserSupportsSpeechRecognition)
    }, [browserSupportsSpeechRecognition])


    useEffect(() => {
        setVoiceInput(transcript);
    }, [transcript, setVoiceInput, browserSupportsSpeechRecognition])

    if (speechRecognitionSupported === null) return null // return null on first render, can be a loading indicator

    if (!speechRecognitionSupported) {
        return <span>Browser does not support speech recognition.</span>
    }



    return (
        <div>
            <p>Microphone: {listening ? 'on' : 'off'}</p>
            <button onClick={SpeechRecognition.startListening}>Start</button>
            <button onClick={SpeechRecognition.stopListening}>Stop</button>
            <button onClick={resetTranscript}>Reset</button>
        </div>
    );
};
export default Voice;
Masai LionOP
alright for some reason
i've narrowed it down to the voice component running multiple timed
the console logs are like
(function here)
undefined
undefined
(function here)