how to execute a .js file containing multiple functions, via react jsx

Question

i have a pre-existing.js file which contains multiple functions ( they call each other within the file) and event listeners.

How do i execute this.js file after elements have been rendered in the.jsx?

I have tried adding export statement to the bottom of the.js file

export const A = functionOne();
export const B = functionTwo();

and adding import

import {A} from './index'

in the.jsx file

but it still gives react error that functions are not defined.

I know the file with the functions works perfectly because previously it was being used in a basic html /.js combination to render the page elements.By using at the bottom of the html

Answer 1

Use exports.funcName . I have called them in useEffect hook
CodeSandBox Link

App.js

import React, { useEffect } from "react";
import "./styles.css";
import { funA, funB } from "./functions";

export default function App() {
  useEffect(() => {
    funA();
    funB();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

Functions.js

exports.funA = () => {
  console.log("This is from Function A");
};

exports.funB = () => {
  console.log("This is from Function B");
};