1

En los hooks guardo los numeros con formato peso Argentino, cuando quiero hacer una operacion de resta con esos numeros como resultado obtengo NAN.

const Home = () => {
 const [incomeAmount, setIncomeAmount] = React.useState(0);
 const [expensesAmount, setExpensesAmount] = React.useState(0);
    
 const settingValues = () => {
   setIncomeAmount(currencyFormat(188700));
   setExpensesAmount(currencyFormat(15000));
  
 }
    
 const currencyFormat = (num) => {
   return Intl.NumberFormat('es-AR',{style:'currency',currency:'ARS'}).format(num);
 }
    
  restar = () => {
    const result1 = incomeAmount - 800;
    const result2 = expensesAmount - 800;
    setIncomeAmount(result1);
    setExpensesAmount(result2); 
   }
    
 return (
 <div>
  <p>{incomeAmount}</p>
    <p>{expensesAmountAmount}</p>
 </div> 
 );

}

1
  • Pues no tengo ni idea de reactjs, pero apostaría algo a que una vez le das formato deja de ser un número (será un string, o un objeto). Los números no tienen "formato", aunque sus representaciones si pueden tenerlo.
    – SJuan76
    Commented el 7 jun. 2021 a las 19:18

1 respuesta 1

3

Como ya te explicaron en los comentarios, si le estás dando formato con el currencyFormat() antes de hacer la resta, entonces deja de ser un entero y se transforma en un string. Así pues, intentar restarle un número a un string no es posible.

Acá te presento una posible solución a lo que estás tratando de hacer, reescribiendo todo tu código y corrigiendo algunos errores de sintaxis:

const {useState, useEffect} = React;

const Home = () => {
    const [incomeAmount, setIncomeAmount] = useState(0);
    const [expensesAmount, setExpensesAmount] = useState(0);

    // const settingValues = () => {
    //  setIncomeAmount(currencyFormat(188700));
    //  setExpensesAmount(currencyFormat(15000));
    // }

    const currencyFormat = (num) => {
        return Intl.NumberFormat('es-AR',{style:'currency',currency:'ARS'}).format(num);
    }
    
    const restar = (newIncomeAmount, newExpensesAmount ) => {
        const result1 = newIncomeAmount - 800;
        const result2 = newExpensesAmount - 800;
        console.log(typeof(currencyFormat(result1)))
        setIncomeAmount(currencyFormat(result1));
        setExpensesAmount(currencyFormat(result2)); 
    }
    
    useEffect(() => {
        restar(188700, 15000)
    }, []);

    return (
    <div>
        <p>{incomeAmount}</p>
        <p>{expensesAmount}</p>
    </div> 
    );
}

// Render it
ReactDOM.render(
  <Home />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Como se puede ver ahí, mediante useEffect(), en el primer render mando a llamar a la función restar() con los valores que quiero restar.

Luego les resto el -800 y recién ahí a los resultados les doy formato con el currencyFormat().

Al mismo tiempo traslado esos resultados a sus respectivos estados y por último los muestro en pantalla.

Haciendo todo eso, la función settingValues() no sería necesaria.

Ejecuta el código, mira el resultado y fíjate si es eso lo que buscabas lograr.

PD: Para confirmar que se tranforma en un string al darle a los números formato con el currencyFormat(), fijate que hago un console.log() con un typeof() del resultado de esa función. Ese typeof() nos muestra por consola que claramente es un string.

1
  • 1
    Parece ser la respuesta correcta.
    – g.4
    Commented el 7 jun. 2021 a las 22:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.