Using React, I'm having trouble sending a function with parameters to one of my components

Question

Im using React with NextJS

What i want to do, is be able to send a function, that has parameters, to my 'Alerts' component, so that it can wait for user feedback before executing the function.

For example, before clearing a list, i want to make sure the user can confirm before actually triggering the function.

So, basically it starts with this line of code

pushAlert(closeAlert, "New List Warning", "Generating a new list will erase all unlocked instruments. Would you like to continue?", "danger", () => {generateNewList(min, max)}, undefined, false)

Focus your attention on the fifth prop, the '() => {generateNewList(min, max)}' part. Also, min and max are both parameters taken in to the parent function

here's what pushAlert looks like

const pushAlert = (onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText, buttonless) => {
        setAlerts([...alerts, {
            "key": keyInc,
            "onClosing": onClosing,
            "alertHeading": alertHeading,
            "alertText": alertText, 
            "alertVariant": alertVariant, 
            "methodToExecute": methodToExecute,
            "buttonText": buttonText,
            "buttonless": buttonless
        }])

        setKeyInc(keyInc + 1)

        console.log(methodToExecute)
    }

Basically, i'm storing all my alerts in an array, and then i send those JS objects to a react component which will generate bootstrap alerts for each alert i have in that array.

Pretty standard stuff.

For the sake of brevity, here's where the 'methodToExecute' is used within my Alerts function. Just didn't wanna bombard you with code that might not be relevant, lemme know if i need to paste more in.

<Button variant={alert.alertVariant} onClick={()=> {alert.methodToExecute != undefined ? alert.methodToExecute : onClosing(alert.key)}}>{alert.buttonText != undefined ? alert.buttonText : 'OK'}</Button>

However the current code does not work. Is there an issue with the syntax i'm originally using to push my function into the new alert object? Or is it something else?

I've gone through and logged the 'methodToExecute' and strangely enough, when i log it, it actually returns the parent function that that first line of code is called within.

Thanks for any help! Lemme know if i need to add in some of the code im excluding!

Answer 1

Based on your Button code it looks as though you simply aren't invoking the methodToExecute callback function.

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute // <-- not invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>

Given:

pushAlert(
  closeAlert,
  "New List Warning",
  "Generating a new list will erase all unlocked instruments. Would you like to continue?",
  "danger",
  () => { generateNewList(min, max); },
  undefined,
  false
)

The fifth argument is a function and should be invoked in the button's onClick handler.

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute() // <-- invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>