How to repeat a function a number of times based off "quantity" variable

Question

I am building a DApp but one that a user inputs the metadata and image to mint an NFT.

That all works fine but I want to add a quantity function that actually mints the # of NFT's they input with a minimum of 1 and a maximum of 100.

right now I have quantity as a state variable

    const [quantity, setQuantity]= useState("");

and I have a button that when pressed connects to a function {onMintPressed}

     <button onClick={ onMintPressed }> Mint NFT </button>

Right now the quantity is just an input with this code

                     <label className={classes.customLabel}>Quantity </label>
              <input
                className={classes.customInput}
                type="number"
                min={1}
                max={100}
                placeholder="1-100"
                onChange={(event) => setQuantity(event.target.value)}

I am new to this but, ideally in a perfect simple coding world the function would look like this

    <button onClick={onMintPressed * x(quantity)}> Mint NFT </button>

I know this does not work and is not a function in itself but that's just the simplest way to explain what I am trying to do

Any help is appreciated, thank you!

Answer 1

Make an anonymous function for the onClick handler () => {...}. And call your function onMintPressed(quantity) inside it.

<button onClick={()=>{onMintPressed(quantity)}}> Mint NFT </button>

Also, your quantity state variable is a string, so take that into consideration when using it for quantity.

update You can also make your onMintPressed method the click handler. It will be passed the event as the parameter, but you can ignore that. Then inside that function, just grab quantity since it's a state variable.

<button onClick={onMintPressed}> Mint NFT </button>

const onMintPressed = (event) => {
  const quantityAsNumber = +quantity
  console.log('quantity is', quantityAsNumber)
}

update 2 I'm not sure what you want to do, but you can call some 'minting' function quantity times by simply sticking it in a for() loop. I also added async/await keywords so each of the 'mintSomething()' calls will block until they complete. This is pretty basic, so perhaps I misunderstand what you want to do.

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  for (let i=0; i < quantity; ++i) {
    await mintSomething()
  }
}

Post answer accept update Whoops. I wrote above that the mintSomething() calls would work in parallel, but that's not true. Each will block until it completes. To mint things in parallel, you just hold onto the promise each mintSomething request returns and then wait on all of them.

const onMintPressed = async (event) => {
  const quantityAsNumber = +quantity
  const promises = []
  for (let i=0; i < quantity; ++i) {
    promises.push(mintSomething())
  }
  await Promise.all(promises)
}