Passing props to function imported from another file

Question

I started working on code clarity in my project and exported several functions from my component to different files. However I found out, that when they are in separate files they dont have access to the props (they had it when they were still in component).

How do I solve this issue?

For now my function file basically looks like this:

import {action1} from './actions
export function foo(){
do something with this.props.bar}

and then I import the function to the main component with

import {foo} from './functions

I am already using redux, so if it can solve the issue somehow Im open to ideas

Answer 1

Add a parameter in your function to pass the props:

export function foo(props){
    return props.bar;
            ^^^^ use the parameter of the function
}

And use it like this:

foo(this.props);