0

How to increment a count in react context by that I need to change the count value based on some events that happens On ContextCount.js file

let count = 0;

 const createSale = async (url, formInputPrice, isReselling, id) => {
    // connect to smart contract

    const web3Modal = new Web3Modal();
    const connection = await web3Modal.connect();
    const provider = new ethers.providers.Web3Provider(connection);
    const signer = provider.getSigner();
    // value of wei of zeo of to convert to it that what metamask read
    const price = ethers.utils.parseUnits(formInputPrice, 'ether');
    // calling func() from contract takes time so use await
    const contract = fetchContract(signer);
    count += 1;
    const listingPrice = await contract.getListingPrice();
    const transaction = !isReselling
      ? await contract.createToken(url, price, { value: listingPrice.toString() })
      // else it belong to this
      : await contract.resellToken(id, price, { value: listingPrice.toString() });
    await transaction.wait();
  };
 <NFTContext.Provider value={{ count }}>
      {children}
    </NFTContext.Provider>

On React Components folder i need to pass the updated value of count when evener a createsale function is happen

So i use on components folder i created a countupdate.jsx On there import React from 'react'; i imported the context file then i use

 const { count } = useContext(ContextCount);
const updateIt = () => (
  <div>{count}</div>
);

export default updateIt;

So I need to show the updated value from ContextCount.js to Components file updateIt.jsx Does anyone know how to implement this?

Vishnu S
  • 1
  • 1

1 Answers1

0

It is not updated because you are using the hook wrong. Here is where you can learn all you need about hooks. The context hook should be used inside your component, like this:

const updateIt = () => {
  const { count } = useContext(ContextCount);
  return (
    <div>{count}</div>
  );
};

And here is the answer on how to update data in context from its consumer

Marat
  • 618
  • 1
  • 6
  • 10
  • But i tried this still it not updating – Vishnu S Jul 03 '22 at 05:51
  • You can provide a reproducible example on jsfiddle and I will help you debug it – Marat Jul 03 '22 at 06:57
  • NFTContext.js on Context folder file [link](https://jsfiddle.net/41v58kmp/) – Vishnu S Jul 03 '22 at 07:27
  • On components folder nftcard.jsx [link of the code](https://jsfiddle.net/rgkxt4ow/1/) – Vishnu S Jul 03 '22 at 07:30
  • I want to update the value on nftcard.jsx from NftContext.js – Vishnu S Jul 03 '22 at 07:31
  • This is not a reproducible example, these are links to separate files. Here is how you create it correctly: https://stackoverflow.com/help/minimal-reproducible-example – Marat Jul 03 '22 at 08:46
  • Then i will give you the github repo of this project – Vishnu S Jul 03 '22 at 10:52
  • 1
    No, the point of making a reproducible example is that when you are making it you are likely to solve the problem yourself (because you need to understand exactly what is the problem to ask good narrow question). Giving someone a link to github repo and asking to "fix the repo that doesn't work" is not a specific question) – Marat Jul 03 '22 at 11:09