React/Javascript: Pass Function with optional Parameter as Prop

Question

I would like to wrap the functions, which will be called on the onClick Event, into another function, which executes some additional actions before the passed function will be executed. Therefore I would like have a function which accepts a function as prop with an optional parameter.

Something like:

import React from "react";

import action from ...

export default class C extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClickLinkOne(shift) {
    // do Stuff
  }
  
  handleClickLinkTwo(){
    // do Stuff
  }

  render() {
  
    return (
        <React.Fragment>
            <a
              className={...}
              onClick={(e) => action(this.handleClickLinkOne(e.shiftKey))}
            >
            CAPTION
            </a>
            <a
              className={...}
              onClick={() => action(this.handleClickLinkTwo())}
            >
            CAPTION TWO
            </a>
        <React.Fragment>
    );
  }
}

function action(prop){

// do stuff

prop();
}

My problem is that I don't know exactly how to handle the optional "e" parameter.

OlehZiniak · Accepted Answer · 2020-11-09 09:58:21Z

1

Not sure if I understood this correctly, but you should refactor your action to something like this.

export function action(cb) {
 ...
 return function(e) {
  ...
  cb(e);
 }
}

import React from "react";

import action from ...

export default class C extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClickLinkOne(e) {
    // do Stuff
    // e.shiftKey can be used here
  }
  
  handleClickLinkTwo(){
    // do Stuff
  }

  render() {
  
    return (
        <React.Fragment>
            <a
              className={...}
              onClick={action(this.handleClickLinkOne)}
            >
            CAPTION
            </a>
            <a
              className={...}
              onClick={action(this.handleClickLinkTwo)}
            >
            CAPTION TWO
            </a>
        <React.Fragment>
    );
  }
}

edited Nov 9, 2020 at 9:58

answered Nov 9, 2020 at 9:39

OlehZiniak

9631 gold badge13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mlnskr Over a year ago

Thank you for your reply. I think you slightly missunderstood my question. I would like to call the passed function, but how can I handle the optional parameter? How do you would call the function in your Example? Exactly this part "// you can call your callback here" would be interesting for me :)

OlehZiniak Over a year ago

you call a function with (), so depending on what you expect in the function you are passing to the action, you can call cb(e), cb(e.shiftKey), cb()

mlnskr Over a year ago

Yes, but how can I decide this dynamically? I would like to use the action()-Function for both scenarios. First should call cb(e.shiftKey) and the second cb().

OlehZiniak Over a year ago

@mlnskr I've edited my answer to make in more clear

mlnskr Over a year ago

My initial question was not completely solved by your answer, but nevertheless I managed to solve my problem with your answer. Thank you!

Collectives™ on Stack Overflow

React/Javascript: Pass Function with optional Parameter as Prop

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related