Correct way to share functions between components in React

by

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>

More Related Contents:

  1. Why calling react setState method doesn’t mutate the state immediately?
  2. Dynamically import images from a directory using webpack
  3. How to pass params with history.push/Link/Redirect in react-router v4?
  4. How to get history on react-router v4?
  5. How to pass params into link using React router v6?
  6. React Router v4 – How to get current route?
  7. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  8. Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release
  9. Why do I get the error “expressions must have one parent element”, how do I fix this?
  10. What is the difference between HashRouter and BrowserRouter in React?
  11. How to set default Checked in checkbox ReactJS?
  12. React Child Component Not Updating After Parent State Change
  13. Call a React component method from outside
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. Set types on useState React Hook with TypeScript
  16. How to get the width of a react element
  17. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  18. How to resolve the error on ‘react-native start’
  19. ReactJS lifecycle method inside a function Component
  20. Element type is invalid: expected a string (for built-in components) or a class/function
  21. Recommended approach for route-based tests within routes of react-router
  22. Class extends React.Component can’t use getInitialState in React
  23. react router v6 No routes matched location
  24. Question mark before dot in javascript / react [duplicate]
  25. React this.state is undefined?
  26. How do I type this ‘as’ JSX attribute in TypeScript?
  27. require is not defined
  28. React: Show loading spinner while images load
  29. import a module from node_modules with babel but failed
  30. Media queries in Material UI components

Leave a Comment