Make the randomTime function return the same result when the 'n' button is pressed, both for setTimeout and for drawing?

Question

JavaScript

Please tell me, the problem is as follows: It is
necessary that when button 1 , 2, 3 is pressed, a timer starts with a random delay from 1 to 10 seconds.
When the timer expires, an entry is added to the click log in the
following
format
: , that -
the randomTime function when pressing the 'n' button returns different results for setTimeout and for drawing.
that is, settimeout when the button is pressed returns a random time from 1 to 10, for example, it turned out 7 seconds in setTimeout, and when drawing, it can write that the button was pressed after 3 seconds, because apparently randomTime() returned another random number, namely 3 seconds for example .... how to make this function return the same value both in setTimeout and in rendering. (that is, he pressed the button - he waits for a random time from 1 to 10 seconds, draws that "the button is pressed for such a random time of seconds) .... Thank you

import React, { Component } from "react";
import classTags from "../components/Programm.module.css";

const buttons = [
  { id: 1, name: "Button1" },
  { id: 2, name: "Button2" },
  { id: 3, name: "Button3" }
];

const asd = () => {
  let date = new Date();
  let dateString = date.toString();
  return dateString;
};

const randomTime = () => {
  return Math.round(Math.random() * 10);
};

class Programm extends Component {
  state = {
    array: []
  };

  buttonClickHandler = id => {
    setTimeout(() => {
      this.setState({
        array: [
          ...this.state.array,
          `${asd()} Button ${id} was pressed  with ${randomTime()}s timeout`
        ]
      }); // распаковываю массив array из стейта и  добавляю "Нажата кнопка"
    }, randomTime() * 1000);
  };

  render() {
    const { array } = this.state; // деструктуризация {array} = this.state - тоже внутри объект {} , а именно  state = {array: []};

    return (
      <div className={classTags.btnPosition}>
        {buttons.map(item => (
          <button
            onClick={() => this.buttonClickHandler(item.id)}
            key={item.id}
          >
            {item.name}
          </button>
        ))}
        <div className={classTags.formLog}>
          {array.map((item, index) => (
            <span key={index}>{item}</span>
          ))}
        </div>
      </div>
    );
  }
}

export default Programm;

.btnPosition {
position: relative;
top: 200px;
display: flex;
justify-content: space-around;
width: 500px;
}

.formLog {
    position: absolute;
    top: 57px;
    right: 48px;
    width: 80%;
    height: 200px;
    border: 1px solid grey;
}

import React from "react";
import "./App.css";
import Programm from "./components/Programm";

const App = props => {
  return (
    <div>
      <Programm />
    </div>
  );
};

export default App;

Answer 1

Man, do you know what variables are?

buttonClickHandler = id => {
    const delay = randomTime();
    setTimeout(() => {
      this.setState({
        array: [
          ...this.state.array,
          `${asd()} Button ${id} was pressed  with ${delay}s timeout`
        ]
      }); // распаковываю массив array из стейта и  добавляю "Нажата кнопка"
    }, delay * 1000);
  };