React/Javascript function is not being called

Question

Totally stumped here. I have a react component that passes a function, requestPatchAccount, to a child component:

import React from 'react';
import { Formik, Field, Form } from 'formik';
...
import { requestPatchAccount } from '../../../modules/account/actions';

const EditCustomerForm = ({customer, handleSubmit}) => {

  return (
    <Container>
      <Formik
        render={ () => (
          <Form>
             ...
                <AccountPaymentDetails
                  currentUser={customer}
                  requestPatchAccount={requestPatchAccount}
                  onSubmit={handleSubmit}
                />

The child component looks like this:

const AccountPaymentDetails = ({
  currentUser,
  requestPatchAccount,
  ...
}) => {
  ...
  const setCCDetails = ccToken => {
    const payload = { ccToken }
    console.log(account_jwt);
    console.log(payload);
    requestPatchAccount(account_jwt, payload);
  };
  ...

The two console.log statements show the correct information. However, requestPatchAccount never gets called. requestPatchAccount looks like this:

export const requestPatchAccount = (authToken, patches) => (
  dispatch,
  getState
) => {
  console.log('i am here');
  console.log(authToken);
  console.log(patches);
...
};

Nothing ever gets logged to the console from inside requestPatchAccount. I've tried not passing it in as a prop but importing from the same file that has the child component, but I see the same behavior. Can someone explain what I'm doing wrong?

Looks like your function is returning a function. It may be working, it depends on whether or not you're actually calling the function that's returned from it. Try requestPatchToken(account_jwt, payload)(dispatch, getState) — Chris B.
– Chris B., Commented Sep 16, 2019 at 20:29

Geoffrey H · Accepted Answer · 2019-09-16 20:32:44Z

3

It appears you're only calling the first part of the function which returns another function with two other params

requestPatchAccount = (authToken, patches) => (dispatch,getState) => {}

You're only calling requestPatchAccount(authToken, patches) when you do requestPatchAccount(account_jwt, payload)

You need to call requestPatchAccount(authToken, patches)(dispatch,getState)

answered Sep 16, 2019 at 20:32

Geoffrey H

1,2782 gold badges10 silver badges35 bronze badges

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

2 Comments

boing Over a year ago

Thanks for the help! You & Chaim are correct in that I'm only calling the first part of the function. But I'm still confused; I never had to invoke my redux functions this way before. I was always able to just type requestPatchAccount with the arguments. I've also never had to specify dispatch or getState before; I don't even know what would go in there.

Geoffrey H Over a year ago

What's the reason you don't go through redux ? You can get both functions from your store. But depending on the reason you might want to create a specific action and go through your redux instead

Chaim Friedman · Accepted Answer · 2019-09-16 20:31:18Z

2

Your function requestPatchAccount is setup in such a way then when its called it is actually returning a function. Here you can see that in action. If you want to keep your code in the setup as it is you would need to do the following.

requestPatchAccount()() basically this takes the function returned from requestPatchAccount and calls it right away.

Of course you would need to pass the values the functions each need as needed.

answered Sep 16, 2019 at 20:31

Chaim Friedman

6,2714 gold badges37 silver badges66 bronze badges

Collectives™ on Stack Overflow

React/Javascript function is not being called

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related