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
– lissettdm, Commented Mar 21, 2021 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: stackoverflow.com/questions/37949981/… — JGPcode
– JGPcode, Commented Sep 22, 2021 at 11:37
Try looking at the useImperativeHandle hook. You can read about it here. stackoverflow.com/questions/57005663/… — Yamo93
– Yamo93, Commented Nov 8, 2021 at 18:52

ThomasSquall · Accepted Answer · 2021-12-30 14:36:02Z

10

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.

answered Dec 30, 2021 at 14:36

ThomasSquall

7576 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Babatunde Mustapha Over a year ago

pls what is this line "const componentOne = <ComponentOne ref={ componentOneRef } />;" for? Because i did not see where the const componentOne is used.

ThomasSquall Over a year ago

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

Collectives™ on Stack Overflow

Export function inside functional component in react

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related