Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

44
Vistas
Call a function imported from another file

I have a function that I declared on a file, like this

export default function doSomething (param1, param2, param3) {
 *Do something here*
}

And then I want to use that function whenever I press a button on a screen I have declared in another file:

import doSomething from '../../doSomething';

export default function Screen(props) {
 return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => doSomething(1, 2, 3)} />
      </SafeAreaProvider>
   </Container>
 );
}

However, any time I press the button, it gives me a Invalid hook call. Hooks can only be called inside of the body of a function component error. I'm fairly new to custom hooks/external functions, so how can I resolve is?

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If doSomething is a hook and not a plain JS function, then you can not just import it and call it as you would do with plain functions.

The following code fixes the issue.

export default function useDoSomething() {

   ...

  const doSomething = React.useCallback((parameter1, parameter2, parameter3) => {}, [])
  return {
    doSomething,
  }
}

Then use the hook as follows.

const { doSomething } = useDoSomething()

return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => doSomething(1, 2, 3)} />
      </SafeAreaProvider>
   </Container>
);
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos