Is there a way of passing state information from react hooks into nested functions in react?

Question

This is my first solo react project so apologies if I've missed anything glaring. I am trying to find a way to get the {account} and {value} into handlePledge. Obviously you can't use them directly in nested functions. I have tried different things such as passing {account} and {value} as arguments (ie handlePledge({account}, {value})) but no luck.

function App() {
  const [account, setAccount] = useState();
  const [button, setButton] = useState('Enable Ethereum');
  const [value, setValue] = useState(1);


  const handlePledge = async (e) => {
    e.preventDefault();
    const gas = await SixtySixDays.methods.createNewPledge().estimateGas();
    const result = await SixtySixDays.methods.createNewPledge().send({
      from: #account-goes-here,
      gas,
      value: #value-goes-here
    })
    console.log(result);
  }

Thank you, any help is greatly appreciated.

"Obviously you can't use them directly in nested functions" ... why not? — Nick
– Nick, Commented Jun 15, 2020 at 23:06
I'm basing this on the hooks rules in the documentation. I realised this after trying it and it not working — cmn721
– cmn721, Commented Jun 15, 2020 at 23:10
I don't see any problem with just using them as variables in your handlePledge function. What the issue? — Seth Lutske
– Seth Lutske, Commented Jun 15, 2020 at 23:12
Well you have to call the hook itself (i.e., useState) at the top level in the component, but you can use the state variable (or the set function) anywhere in the function, just normal closure — Nick
– Nick, Commented Jun 15, 2020 at 23:12
Thank you for your help guys, I misunderstood what the docs were saying — cmn721
– cmn721, Commented Jun 15, 2020 at 23:15

Pedro Filipe · Accepted Answer · 2020-06-15 23:12:45Z

2

You can pass the values directly like this:

 const result = await SixtySixDays.methods.createNewPledge().send({
   from: account,
   gas,
   value: value
}

"Obviously you can't use them directly in nested functions." - You can and you should

answered Jun 15, 2020 at 23:12

Pedro Filipe

1,1151 gold badge11 silver badges17 bronze badges

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

1 Comment

cmn721 Over a year ago

Thank you Pedro, I misread and misunderstood the docs

curious_guy · Accepted Answer · 2020-06-15 23:12:08Z

1

You can and should use the any state variables directly.

    const result = await SixtySixDays.methods.createNewPledge().send({
      from: account,
      gas,
      value: value
    })

The above should work.

answered Jun 15, 2020 at 23:12

curious_guy

3981 silver badge7 bronze badges

2 Comments

cmn721 Over a year ago

Thank you curious_guy, I misread and misunderstood the docs

curious_guy Over a year ago

Haha, that happens to the best of us!

Artemis Prime · Accepted Answer · 2020-06-15 23:15:57Z

0

As @Nick implies, you in fact can use those variables in an enclosed scope. They are perfectly accessible from functions you declare within their shared scope.

Perhaps your issue is how the rendering is being updated? If I've not answered your issue, please kindly show the exact error you're getting.

answered Jun 15, 2020 at 23:15

Artemis Prime

1831 silver badge9 bronze badges

1 Comment

cmn721 Over a year ago

I have updated to the suggested but it's still not working. The error I'm getting is suggesting that when the form is submitted value is not being passed into send. That is that the value being read is 0, which I can't understand why.

Collectives™ on Stack Overflow

Is there a way of passing state information from react hooks into nested functions in react?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related