reactjs - Correct way to share functions between components in React

Question

I have multiple components which all need to do the same thing. (A simple function which maps over their child components and does something to each one). At the moment I am defining this method in each of the components. But I only want to define it once.

I could define it in the top level component and then pass it down as a prop. But that doesn't feel quite right. It is more a library function than a prop. (It seems to me).

What is the correct way of doing this?

Answer 1

Utils.js with latest Javascript ES6 syntax

Create the Utils.js file like this with multiple functions, etc

const someCommonValues = ['common', 'values'];

export const doSomethingWithInput = (theInput) => {
   //Do something with the input
   return theInput;
};

export const justAnAlert = () => {
   alert('hello');
};

Then in your components that you want to use the util functions, import the specific functions that are needed. You don't have to import everything

import {doSomethingWithInput, justAnAlert} from './path/to/utils.js/file'

And then use these functions within the component like this:

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>