Cuando ejecute este código, simplemente repetirá el mensaje de la ventana "¿Qué moneda usa?", Incluso una vez que ingrese una moneda válida. Soy muy nuevo en js y reacciono, lo siento mucho si esto es realmente simple.
import React from "react" function Product(props) { const MoreInfo = () => { alert(props.product.description); } const UserCurrency = window.prompt("What currency do you use?") var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: UserCurrency, }) return ( <div> <h2>{props.product.name}</h2> <p>{formatter.format(props.product.price)}</p> <button onClick={MoreInfo}>More Info</button> </div> ) } export default ProductDebe aprender sobre los ganchos de reacción, en este caso: useState y useEffect
import { useState, useEffect } from 'react' function Product(props) { const [userCurrency, setUserCurrency] = useState(null) useEffect(() => { const uc = window.prompt("What currency do you use?") setUserCurrency(uc) }, []) const MoreInfo = () => { alert(props.product.description); } var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: UserCurrency, }) return ( <div> <h2>{props.product.name}</h2> <p>{formatter.format(props.product.price)}</p> <button onClick={MoreInfo}>More Info</button> </div> ) } export default Productcon useEffect, el código se ejecutará solo una vez cuando el componente esté montado, si pasa una matriz vacía de dependencias como segundo argumento.
Lea los documentos, ya que esta explicación está lejos de ser suficiente para comprender lo que está en juego aquí.