I have a jsx file, let's call it A, which goes something like this:
export default function Outer() {
function inner() {
*some logic here*
return variable
}
function inner2() {
*some logic here*
}
function inner3() {
*some logic here*
}
return (
*various items here*
)
}
I need to export function inner() to another file, let's call it B, because file B needs to be able to read the variable returned from function inner()
However, I am not able to write export function inner(), because exports can only be called at the top level.
It is also not possible to move function inner() to top level, because it relies on logic from function inner2() and function inner3() as well.
Looking for suggestions on how I could potentially handle this issue. I've done some reading up, and saw things like useSWR hook, react context API, and redux. None of which I currently know.
For a beginner like myself, can anybody recommend which solution would work the best for my case, and also which solution would be the easiest to implement?
Also, other than these 3 things that I came across, are there any other solutions that would work just as well, but which I have missed?
const newOuter = (()=>{
function inner(){
return "inner" + inner2() + inner3();
}
function inner2(){
return " inner2"
}
function inner3(){
return " inner3"
}
function original(params){
/*various items here*/
return params;
}
return {
inner,
original
}
})()
export default newOuter;
//B.js
import newOuter from './newOuter.js'
const innerReturnValue = newOuter.inner()
So this way, you can call newOuter.original() and get the original return value of the outer function and in case you only need the inner function you can call newOuter.inner().