Export function inside functional component in react

Question

It is possible to export a function that is inside a functional component and that can be imported into another? Example code: https://codesandbox.io/s/blissful-sanne-chk5g?file=/src/App.js:0-275

Component One:

import React from 'react'

const componentOne = () => {

    function hello(){
    console.log("Hello, says the componentOne")
  }
  return (
    <div>
      
    </div>
  )
}

export default componentOne

Component Two:

import React from 'react'
import {hello} from "./ComponentOne"

const componentTwo = () => {

   
  return (
    <div>
      
    <button
    onClick={hello}>
        Hello
    </button>

    </div>
  )
}

export default componentTwo

App.js

import ComponentTwo from "./components/ComponentTwo";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ComponentTwo />
    </div>
  );
}

If you want to export the function you need to move it out of the component — lissettdm, Mar 21 '21 at 22:10
Hi Katharina, in my case I solved it with custom hooks that allows you to export a component with all the logic, another option can be: https://stackoverflow.com/questions/37949981/call-child-method-from-parent — JGPcode, Sep 22 '21 at 11:37
Try looking at the useImperativeHandle hook. You can read about it here. https://stackoverflow.com/questions/57005663/when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue/67282282#67282282 — Yamo93, Nov 08 '21 at 18:52

score 9 · Answer 1 · answered Dec 30 '21 at 14:36

Exporting a function from a functional component in order to be used by a parent component is possible.

All you have to do is to make good use of refs.

see the below example:

Component One

import React, { forwardRef, useImperativeHandle } from "react";

const ComponentOne = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        hello() {
            console.log("Hello, says the componentOne");
        }
    }));

    return (
        <div></div>
    );
});

export default ComponentOne;

Component Two

import React { useRef } from "react";
import ComponentOne from "./ComponentOne";

const ComponentTwo = () => {
    const componentOneRef = useRef(null);
    const componentOne = <ComponentOne ref={ componentOneRef } />;
   
    return (
        <div>
            <button onClick={ () => componentOneRef.current.hello() }>Hello</button>
        </div>
    );
}

export default componentTwo;

Let me add that in your example it seems you do not want to render your ComponentOne but only use the hello function inside of it. If this is the case, probably a functional component is not what you are really looking for: you may think of creating a utility javascript file where you export functions.

pls what is this line "const componentOne = ;" for? Because i did not see where the const componentOne is used. — Babatunde Mustapha, Jul 23 '23 at 12:18
Hey @BabatundeMustapha the line is used only to initialize and reference the component, it's just an example. You could also use it in your actual DOM and it would have worked as well — ThomasSquall, Aug 22 '23 at 06:41

score -3 · Answer 2 · answered Mar 21 '21 at 21:30

You can do it in this way:

Component One:

import React from "react";

export function hello() {
  console.log("Hello, says the componentOne");
}

const componentOne = () => {
  return <div></div>;
};

export default componentOne;

Component Two:

import React from "react";
import { hello } from "./ComponentOne";

const componentTwo = () => {
  return (
    <div>
      <button onClick={hello}>Hello</button>
    </div>
  );
};

export default componentTwo;

App.js

import "./styles.css";
import ComponentTwo from "./components/ComponentTwo";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ComponentTwo />
    </div>
  );
}

Here an example: https://codesandbox.io/s/focused-forest-zncxn?file=/src/App.js

I appreciate your answer, but I would like to know if it would be possible to export from inside the component since my function has dependencies with other functions. — JGPcode, Mar 21 '21 at 21:42

Export function inside functional component in react

2 Answers2