React return string from function in a prop

Question

In react I need to set a prop based on the return value from a function. I want to try to avoid using state for this and I am getting a variable from localstorage so that the user can pick up where they left off. This is the function that returns the value from local storage:

const getCustomerId = () => {
    return getItem('customerId').toString();
};

Then I have a provider that needs access to the customerId from localstorage. I try to pass the functions return value as a prop but the prop is supposed to be a string and its giving it a function still :

<ProfileProvider
      id="1"
      email={user?.email}
      setSelectedCustomer={handleChangeCustomer}
      customerId={getCustomerId}
    >

Also when the handleChangeCustomer is called, the getCustomerId should be called from within it to change. so should the prop of customerId with the updated value from localStorage.

Im not sure how this can done without using state.

handle customer function:

const handleChangeCustomer = id => {
    
    setLocalCustomer(id);
    getCustomerId();
  };

Sadat Jubayer · Accepted Answer · 2021-01-29 02:19:00Z

1

You need to invoke the function like this:

<ProfileProvider
  id='1'
  email={user?.email}
  setSelectedCustomer={handleChangeCustomer}
  customerId={() => getCustomerId()}
/>;

answered Jan 29, 2021 at 2:19

Sadat Jubayer

2492 silver badges5 bronze badges

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

4 Comments

user14849955 Over a year ago

can you explain the difference between just adding () and adding an arrow function ()=>{} ?

Sadat Jubayer Over a year ago

If you need the function to be referenced so it is called later, then you can use the function expression like this: customerId={etCustomerId} When need the function to be called right NOW then you have to invoke the function like this: customerId={() => getCustomerId()} In your case, you need to get the returned value from the function, so have to call it NOW.

ousmane784 Over a year ago

For some reason using () => getCustomerId() didnt work but using getCustomerId() did. Do you know why?

Rafael Buzatto de Campos Over a year ago

actually there is no much difference between customerId={() => getCustomerId()} and customerId={getCustomerId}. Both situations you are passing a function, to customerId, not invoking the function.

score 0 · Accepted Answer · 2021-01-29 02:28:18Z

0

//Have you tried adding the parentheses at the end?

<ProfileProvider
      id="1"
      email={user?.email}
      setSelectedCustomer={handleChangeCustomer}
      customerId={getCustomerId()}
    />


//Or adding it to a arrow function:

    <ProfileProvider
          id="1"
          email={user?.email}
          setSelectedCustomer={handleChangeCustomer}
          customerId={()=>{getCustomerId()}}
        />

edited Jan 29, 2021 at 2:28

answered Jan 29, 2021 at 1:50

user14849955

3 Comments

ousmane784 Over a year ago

Yes that works! Is there any way to call getCustomerId() from the handleChangeCustomer function and it updates in the prop?

user14849955 Over a year ago

@ousmane784 Can i see your handleChangeCustomer function?

ousmane784 Over a year ago

I added the function. Its just a simple one where it sets the localstorage id and it should update the prop in provider

Collectives™ on Stack Overflow

React return string from function in a prop

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related