React Как отобразить случайное значение после того как элемент отрендерился и вернуть его в state?

Question

Подскажите, пожалуйста, как вывести случайное значение после того как элемент отрендерился? Вот простой пример в песочнице

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)];

    //  Пробовал  создавать DOM элемент  <div className="prize">... </div> Тут, но не олучаеться найти element.closest(".bonus_item") Возвращает underfind
    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>

        {/*  КАК показывать это уведомление после того как кнопку нажали, и указывать нужное случайное значение bonusVal ? */}
        <div className="bonus_item">
          <div className="prize">
            <p className="prize_text">Поздравляем вы получини</p>
            <p className="prize_resalt">+{bonusVal} монет</p>{" "}
            {/*  Как сюда поучать случайное число из массива возможных выйгрышей */}
          </div>

          <button className="btn_getBonus" onClick={(e) => getBonus(e)}>
            Получить бонус
          </button>
        </div>
      </div>
    </main>
  );
}

export default Main;

Задача в следующем - После нажатия кнопки получить бонус, необходимо показать уведомление (className="prize") в котором отобразиться значение этого бонуса (Случайное значение из массива доступных). Недопонимание вызывает, как пробрасывать значение {bonusVal} в это сообщение Пробовал генерировать данный блок className="prize" в функции getBonus, но тогда возникает вопрос как получить ноду именно этого bonus_item все обращение из функции по типу element.closest(".bonus_item") или element.parentNode возвращают undefined Подскажите, пожалуйста как это лечиться ?

Answer 1

До конца не понял все же чего вы хотели там добиться.

Codesandbox

function Main({ coinsValue, addCoins, bonusesStatus }) {
  const [prize, setPrize] = useState(false);
  const [bonusVal, setBonusVal] = useState(0);
  const [bonusList] = useState([200, 300, 500]);

  function getBonus() {
    const bonusValue = bonusList[~~(Math.random() * bonusList.length)];
    setBonusVal(bonusValue);

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

    addCoins(bonusValue);
  }

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

        {/*  КАК показывать это уведомление после того как кнопку нажали, и указывать нужное случайное значение bonusVal ? */}
        <div className="bonus_item">
          <div className="prize">
            <p className="prize_text">Поздравляем вы получини</p>
            <p className="prize_resalt">+{bonusVal} монет</p>{" "}
            {/*  Как сюда поучать случайное число из массива возможных выйгрышей */}
          </div>

          <button className="btn_getBonus" onClick={getBonus}>
            Получить бонус
          </button>
        </div>
      </div>
    </main>
  );
}

БЛОГ НА HUSL

React Как отобразить случайное значение после того как элемент отрендерился и вернуть его в state?

Ответы (1 шт):