Value from option tag doesn't change

Question

I have 2 variables, that have price. I need to pass a value {price} to the modal window, but I get a value once and they never change, they should change every 10 seconds (numbers on BUY buttons changing only if I add Math.Random() every 10 seconds)

import React, {useState} from "react";
import './select.css'
import Modalbuy from "../popup/Modalbuy"
import Modalsell from "../popup/Modalsell"
import { useEffect } from "react";

const Select = () => {


    
    const [value, setValue] = useState(undefined || Number);
    const [usdrub, setUsdrub] = useState(Math.random() * (64-61) + 61);
    useEffect(() => {
      const interval = setInterval(() => {
        setUsdrub(Math.random() * (64-61) + 61);
      }, 10000);
      return () => clearInterval(interval);
    }, [])

    const [rubusd, setRubusd] = useState(Math.random() * 2);
    useEffect(() => {
      const interval = setInterval(() => {
        setRubusd(Math.random() * 2);
      }, 10000);
      return () => clearInterval(interval);
    }, [])



    function changeSelect(event) {
        setValue(event.target.value)
    }
    const [modalBuyActive, setModalBuyActive] = useState(false)
    const [modalSellActive, setModalSellActive] = useState(false)
    


    


    return (
        <div>
        <select onChange={changeSelect}>
          <option></option>   
        <option name="USD/RUB" value={usdrub}>USD/RUB</option>
        <option name="RUB/USD" value={rubusd}>RUB/USD</option>
        </select>
        <div className="Curr">
          <div className="Buy" name="buy"> <button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>BUY {value ? Number(value) + Math.random() * 1 : ""} </button>
          <Modalbuy active={modalBuyActive} setActive={setModalBuyActive} price={value}/>
          </div>
          <div className="Sell" name="sell"><button className="Sell" type="btn"  onClick={() => setModalSellActive(true)}>SELL {value ? value : ""}</button>
          <Modalsell active={modalSellActive} setActive={setModalSellActive} price={value}/>
          </div>
        </div>
          
          
        </div>
        
    )
}

UPD. I think its better to also add my modal windows code

Modalbuy.js

import React, {useState} from "react";
import "./modal.css";
import { DataBuyContext } from "../../page/page";


const Modalbuy = (props) => {
  const {active, setActive,price} = props
  const [inputVolume, setInputVolume] = useState("")
  function saveInput(event) {
    setInputVolume(event.target.value)
    console.log(inputVolume)
  }

  const {dataBuy, setDataBuy} = React.useContext(DataBuyContext)
  function addBuy() {
    setDataBuy([...dataBuy,{side: "BUY", price:  price, volume: inputVolume,timestamp: new Date().toLocaleTimeString()}])
    // console.log(dataBuy)
  }


    return (
      
      
        <div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
          <div className="modal__content" onClick={e => e.stopPropagation()}>
            <header>Make order</header>
            <p>BUY {price}</p>
            <input placeholder="Volume" value={inputVolume} onChange={saveInput}></input>
            <div>
              <button onClick = {addBuy}>Ok</button>
              <button onClick={() => setActive(false)} >Cancel</button>
            </div>


          </div>
        </div>
        
        
    )
}

export default Modalbuy;

Answer 1

Something like this?

import React, { useState } from "react";
import { useEffect } from "react";

const popUpStyle = {
    border: "1px solid black",
    padding: "20px",
    margin: "10px",
    width: "100%",
    height: "100%",
    position: "fixed",
    top: "0",
    left: "0",
    background: "white"
};

const Modalbuy = ({ active, setActive, price, currency }) => {
    const logPriceString = () => {
        console.log(`BUY ${price} ${currency}`)
    }

    return <>
        {active && <div style={popUpStyle}>
            BUY at Price: {price}
            <br />
            <br />
            <button onClick={logPriceString} >Log Price String</button>
            <br />
            <br />
            <button onClick={() => {
                setActive(false);
            }} > Close</button>
        </div>}

    </>
}

const Modalsell = ({ active, setActive, price, currency }) => {
    const logPriceString = () => {
        console.log(`SELL ${price} ${currency}`)
    }

    return <>
        {active && <div style={popUpStyle}>
            SELL at Price: {price}
            <br />
            <br />
            <button onClick={logPriceString} >Log Price String</button>
            <br />
            <br />
            <button onClick={() => {
                setActive(false);
            }} > Close</button>
        </div>}
    </>
}

export default function Select() {
    const [currentCurrency, setCurrentCurrency] = useState(undefined || Number);
    const [currentPrice, setCurrentPrice] = useState();

    const USD_RUB_price = () => {
        return Math.random() * (64 - 61) + 61
    }

    const RUB_USD_price = () => {
        return Math.random() * 2
    }

    const refreshPrice = (currentCurrency) => {
        if (currentCurrency === "USD/RUB") {
            setCurrentPrice(USD_RUB_price());
        }

        else if (currentCurrency === "RUB/USD") {
            setCurrentPrice(RUB_USD_price())
        }
    }

    useEffect(() => {
        const interval = setInterval(() => {
            refreshPrice(currentCurrency);
        }, 2000);
        return () => clearInterval(interval);
    }, [currentCurrency])

    function changeSelect(event) {
        setCurrentCurrency(event.target.value)
        refreshPrice(event.target.value);
    }
    const [modalBuyActive, setModalBuyActive] = useState(false)
    const [modalSellActive, setModalSellActive] = useState(false)

    return (
        <div>
            <select onChange={changeSelect}>
                <option></option>
                <option value="USD/RUB">USD/RUB</option>
                <option value="RUB/USD">RUB/USD</option>
            </select>

            <br />
            <br />

            <div className="Curr">
                <div className="Buy" name="buy"> <button className="Buy" type="btn" onClick={() => setModalBuyActive(true)}>BUY {currentPrice} </button>
                    <Modalbuy active={modalBuyActive} setActive={setModalBuyActive} price={currentPrice} currency={currentCurrency} />
                </div>
                <div className="Sell" name="sell"><button className="Sell" type="btn" onClick={() => setModalSellActive(true)}>SELL {currentPrice}</button>
                    <Modalsell active={modalSellActive} setActive={setModalSellActive} price={currentPrice} currency={currentCurrency} />
                </div>
            </div>




        </div>

    )
}