Question 241609 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React use nested functions by importing to a different file

speechRecognition.jsx

import { useRef } from "react";
const CharacterState = {
  Idle: 0,
  Listening: 1,
  Speaking: 2,
};

const useSpeechRecognition = () => {
  const [characterState, setCharacterState] = useState(CharacterState.Idle);

  const onSpeechFoundCallback = useRef((text) => {});
  const setOnSpeechFoundCallback = (callback) => {
    onSpeechFoundCallback.current = callback;
  };

  const onMicButtonPressed = () => {
    return true;
  };

  return {
    onMicButtonPressed,
    setOnSpeechFoundCallback,
  };
};

export default useSpeechRecognition;

Here i am importing

import useSpeechRecognition, {
  CharacterState,
} from "../apis/speechRecognition";

const {
  onMicButtonPressed,
  setOnSpeechFoundCallback,
} = useSpeechRecognition();

Here is my code where i have some inner functions which i am importing and using in child function.
I am getting below error.

Experience.jsx: 8 Uncaught SyntaxError: The requested module ‘/src/apis/speechRecognition.js’
does not provide an export named ‘CharacterState'(at Experience.jsx: 8: 3)

Please check what can be the issue.

Tags:

3

Answers


  1. 0

    If you want to use a function in a child component that was declared in the parent, you can simply pass the function as a props to the child from the parent.

    Login or Signup to reply.
  2. 0

    Experience.jsx: 8 Uncaught SyntaxError: The requested module ‘/src/apis/speechRecognition.js’ does not provide an export named ‘CharacterState'(at Experience.jsx: 8: 3)

    I think you just forgot to export CharacterState.

    export const CharacterState = {
  Idle: 0,
  Listening: 1,
  Speaking: 2,
};
    Login or Signup to reply.
  3. 0 
    import { useRef } from "react";
export const CharacterState = { // add export keyword here
  Idle: 0,
  Listening: 1,
  Speaking: 2,
};

const useSpeechRecognition = () => {
  const onSpeechFoundCallback = useRef((text) => {});
  const setOnSpeechFoundCallback = (callback) => {
    onSpeechFoundCallback.current = callback;
  };

  const onMicButtonPressed = () => {
    return true;
  };

  return {
    onMicButtonPressed,
    setOnSpeechFoundCallback,
    CharacterState, // export CharacterState with return
  };
};

export default useSpeechRecognition;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search