ReactJS, How to display a random value after the element has rendered and return it to the state?

user_7247560 0
Viewed 43

Can you please tell me how to output a random value from an array after the element has been rendered? Here is a simple sandbox example

import React, { useState } from "react";

function Main({ coinsValue, addCoins, bonusesStatus }) {
  const [prize, setPrize] = useState(false);

  let bonusVal = 0;

  function getBonus(element) {
    const bonusVals = [200, 300, 500];
    bonusVal = bonusVals[Math.floor(Math.random() * bonusVals.length)];

    setTimeout(() => {
      setPrize(!prize);
    }, 500);
    addCoins(bonusVal);
    return bonusVal;
  }

  return (
    <main>
      <div className="bonuses">
        <div className="bonus_item"></div>
        <div className="bonus_item"></div>
        <div className="bonus_item"></div>
        <div className="bonus_item"></div>

        {/*  How to show this notification after the button has been pressed, and specify the desired random value bonusVal ? */}
        <div className="bonus_item">
          <div className="prize">
            <p className="prize_text">Congratulations you received</p>
            <p className="prize_resalt">+{bonusVal} coins</p>{" "}
          </div>

          <button className="btn_getBonus" onClick={(e) => getBonus(e)}>
            Get bonus
          </button>
        </div>
      </div>
    </main>
  );
}

export default Main;

The task is as follows - After clicking the button to get a bonus, you need to show a notification (className = "prize") in which the value of this bonus will be displayed (a random value from the array of available ones). I have misunderstanding causes how to forward the {bonusVal} value into this message. I tried to generate block className = "prize" in the getBonus function, but then the question arises how to get the node of this particular bonus_item all the call from the function by the type element.closest(". Bonus_item") or element.parentNode return undefined Can you please tell me how to fix it?

reactjs javascript
1 Answers

Use the prize state atom you already have to store the last bonus received. When the component's state changes, it re-renders, and you can use that state value in the output.

import React, { useState } from "react";

function Main({ coinsValue, addCoins, bonusesStatus }) {
  const [prize, setPrize] = useState(null);

  function getBonus(element) {
    const bonusVals = [200, 300, 500];
    const bonusVal = bonusVals[Math.floor(Math.random() * bonusVals.length)];
    setPrize(bonusVal);
    setTimeout(() => setPrize(null), 500);
    addCoins(bonusVal);
    return bonusVal;
  }

  return (
    <main>
      <div className="bonuses">
        {prize ? (
          <div className="bonus_item">
            <div className="prize">
              <p className="prize_text">Congratulations you received</p>
              <p className="prize_resalt">+{prize} coins</p>
            </div>
          </div>
        ) : (
          <button className="btn_getBonus" onClick={(e) => getBonus(e)}>
            Get bonus
          </button>
        )}
      </div>
    </main>
  );
}

export default Main;
AKX_516850
Related