Styjun

Ethernet, Wifi and a little human psychology

Output a Super Mario Image

Examples of proofs by making reduction to a finite set

What is the mathematical notation for rounding a given number to the nearest integer?

Why don't Wizards use wrist straps to protect against disarming charms?

What next step can I take in solving this sudoku?

How do I say "quirky" in German without sounding derogatory?

Are space camera sensors usually round, or square?

Olympic game scoring

Can I conceal an antihero's insanity - and should I?

Can I see Harvest moon in India?

How to control the output voltage of a solid state relay

Python web-scraper to download table of transistor counts from Wikipedia

geschafft or geschaffen? which one is past participle of schaffen?

Why the car dealer is insisting on loan instead of cash

What was the ultimate objective of The Party in 1984?

Why don't airports use arresting gears to recover energy from landing passenger planes?

Which is the current decimal separator?

How can I discourage sharing internal API keys within a company?

How to publish superseding results without creating enemies

POSIX compatible way to get user name associated with a user ID

Make 2019 with single digits

Why does the speed of sound decrease at high altitudes although the air density decreases?

How would you control supersoldiers in a late iron-age society?

Proper way to pass functions between distant components

ReactJS: Why is passing the component initial state a prop an anti-pattern?Correct way to share functions between components in ReactPassing Props between componentsPassing messages between components in React.jsHow to pass function as props in React?Passing props to React component treeReact - passing unique React components as propsfunction passed as React prop is not appearing in called childReact overwrite component functionHow to pass component props to react-navigation's static navigationOptions function

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

1

In my top level component i have:

<NavigationComponent />
<Router>
 <Switch>
 <Route component=SomeComponent />
 ...
 </Switch>
</Router>

now, NavigationComponent have a delete icon which when clicked should call a function. I want that function to come from SomeComponent (or some other components from whatever active route is).

I’ve tried wrapping all routes into context, but it feels so entangled.

Other option was to pass setDeleteCallback to SomeComponent which would (in componentDidMount) set the callback and then pass that to NavigationComponent through render props. Also feels entangled.

Is there some best practice way to do this kind of plumbing?

ps. i dont need coded solution, just an idea.

reactjs

share|improve this question

edited Mar 28 at 12:07

dee zg

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You should take a look at react-redux, it does exactly what you want
  
  – mthrsj
  Mar 28 at 12:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mthrsj i do use redux but i dont want my redux state to contain functions.
  
  – dee zg
  Mar 28 at 12:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  A state shouldn't necessarily contain functions. You can dispatch an action, as with any other case.
  
  – Estus Flask
  Mar 28 at 12:15
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Not, that's not the idea. The NavigationComponent emit an action, and the SomeComponent detect the change through componentDidUpdate and then call the desired function. What do you think?
  
  – mthrsj
  Mar 28 at 12:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mrhrsj how would navigation know which action data to include and which delete action to disptch?
  
  – dee zg
  Mar 28 at 15:31
  

  
  
  
  

add a comment
 | 

0

1

In my top level component i have:

<NavigationComponent />
<Router>
 <Switch>
 <Route component=SomeComponent />
 ...
 </Switch>
</Router>

now, NavigationComponent have a delete icon which when clicked should call a function. I want that function to come from SomeComponent (or some other components from whatever active route is).

I’ve tried wrapping all routes into context, but it feels so entangled.

Other option was to pass setDeleteCallback to SomeComponent which would (in componentDidMount) set the callback and then pass that to NavigationComponent through render props. Also feels entangled.

Is there some best practice way to do this kind of plumbing?

ps. i dont need coded solution, just an idea.

reactjs

share|improve this question

edited Mar 28 at 12:07

dee zg

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You should take a look at react-redux, it does exactly what you want
  
  – mthrsj
  Mar 28 at 12:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mthrsj i do use redux but i dont want my redux state to contain functions.
  
  – dee zg
  Mar 28 at 12:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  A state shouldn't necessarily contain functions. You can dispatch an action, as with any other case.
  
  – Estus Flask
  Mar 28 at 12:15
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Not, that's not the idea. The NavigationComponent emit an action, and the SomeComponent detect the change through componentDidUpdate and then call the desired function. What do you think?
  
  – mthrsj
  Mar 28 at 12:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @mrhrsj how would navigation know which action data to include and which delete action to disptch?
  
  – dee zg
  Mar 28 at 15:31
  

  
  
  
  

add a comment
 | 

In my top level component i have:

<NavigationComponent />
<Router>
 <Switch>
 <Route component=SomeComponent />
 ...
 </Switch>
</Router>

now, NavigationComponent have a delete icon which when clicked should call a function. I want that function to come from SomeComponent (or some other components from whatever active route is).

I’ve tried wrapping all routes into context, but it feels so entangled.

Other option was to pass setDeleteCallback to SomeComponent which would (in componentDidMount) set the callback and then pass that to NavigationComponent through render props. Also feels entangled.

Is there some best practice way to do this kind of plumbing?

ps. i dont need coded solution, just an idea.

reactjs

share|improve this question

edited Mar 28 at 12:07

dee zg

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

<NavigationComponent />
<Router>
 <Switch>
 <Route component=SomeComponent />
 ...
 </Switch>
</Router>

share|improve this question

edited Mar 28 at 12:07

dee zg

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

share|improve this question

edited Mar 28 at 12:07

dee zg

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

asked Mar 28 at 11:33

dee zgdee zg

5,79144 gold badges2020 silver badges4141 bronze badges

1 Answer
1

active

oldest

votes

2

How about this idea, sorry just as I wanted to write code did not put it in comments

state=onDelete:()=>

onDeleteHandler=func=>this.setState(onDelete:func)

 <NavigationComponent onDelete=this.state.onDelete/>
 <Router>
 <Switch>
 <Route component=()=><SomeComponent onDeleteHandler=this.onDeleteHandler/> />
 ...
 </Switch>
 </Router>

now someComponent should send its desired delete function back here, maybe on componentDidMount and NavigationComponent will receive it on componentDidUpdate as anew prop

share|improve this answer

edited Mar 28 at 12:45

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for your input! yes, thats one option i’ve tried (with render props, tought). i will upvote for now just to see if someone else comes up with something we overlooked. if not, i’ll accept it.
  
  – dee zg
  Mar 28 at 15:40
  
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55396579%2fproper-way-to-pass-functions-between-distant-components%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

How about this idea, sorry just as I wanted to write code did not put it in comments

state=onDelete:()=>

onDeleteHandler=func=>this.setState(onDelete:func)

 <NavigationComponent onDelete=this.state.onDelete/>
 <Router>
 <Switch>
 <Route component=()=><SomeComponent onDeleteHandler=this.onDeleteHandler/> />
 ...
 </Switch>
 </Router>

now someComponent should send its desired delete function back here, maybe on componentDidMount and NavigationComponent will receive it on componentDidUpdate as anew prop

share|improve this answer

edited Mar 28 at 12:45

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for your input! yes, thats one option i’ve tried (with render props, tought). i will upvote for now just to see if someone else comes up with something we overlooked. if not, i’ll accept it.
  
  – dee zg
  Mar 28 at 15:40
  
  

  
  
  
  

add a comment
 | 

2

How about this idea, sorry just as I wanted to write code did not put it in comments

state=onDelete:()=>

onDeleteHandler=func=>this.setState(onDelete:func)

 <NavigationComponent onDelete=this.state.onDelete/>
 <Router>
 <Switch>
 <Route component=()=><SomeComponent onDeleteHandler=this.onDeleteHandler/> />
 ...
 </Switch>
 </Router>

now someComponent should send its desired delete function back here, maybe on componentDidMount and NavigationComponent will receive it on componentDidUpdate as anew prop

share|improve this answer

edited Mar 28 at 12:45

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for your input! yes, thats one option i’ve tried (with render props, tought). i will upvote for now just to see if someone else comes up with something we overlooked. if not, i’ll accept it.
  
  – dee zg
  Mar 28 at 15:40
  
  

  
  
  
  

add a comment
 | 

How about this idea, sorry just as I wanted to write code did not put it in comments

state=onDelete:()=>

onDeleteHandler=func=>this.setState(onDelete:func)

 <NavigationComponent onDelete=this.state.onDelete/>
 <Router>
 <Switch>
 <Route component=()=><SomeComponent onDeleteHandler=this.onDeleteHandler/> />
 ...
 </Switch>
 </Router>

now someComponent should send its desired delete function back here, maybe on componentDidMount and NavigationComponent will receive it on componentDidUpdate as anew prop

share|improve this answer

edited Mar 28 at 12:45

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

state=onDelete:()=>

onDeleteHandler=func=>this.setState(onDelete:func)

 <NavigationComponent onDelete=this.state.onDelete/>
 <Router>
 <Switch>
 <Route component=()=><SomeComponent onDeleteHandler=this.onDeleteHandler/> />
 ...
 </Switch>
 </Router>

share|improve this answer

edited Mar 28 at 12:45

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges

answered Mar 28 at 12:32

Amir-MousaviAmir-Mousavi

1,22111 gold badge1818 silver badges4646 bronze badges