Categorías
Desarrollo y Programación

React dar formato a números

Hola, bienvenidos a otro tutorial en esta ocasión con React a dar formato a un número para mostrarlo en pantalla.

Vamos a trabajar en el aspecto visual deseado sin necesidad de cambiar el dato original, es decir meramente vamos a trabajar con la estética del número.

Este material está basado en la información que encontré en este hilo de Stackoverflow.

Para esto dejo el siguiente videotutorial, espero que les sea útil como material de apoyo.

Además dejo el código final en la parte de abajo para que revisen si algo no funciona como debe.

import React from "react";
import "./App.css";
function FormatNumber({ number }) {
return (
<span style={{ color: "red" }}>
{new Intl.NumberFormat("ES-MX", {
style: "currency",
currency: "MXN"
}).format(number)}
</span>
);
}
class App extends React.Component {
state = {
number: 0
};
handleChange = event => {
this.setState({
number: event.target.value > 999999999 ? 999999999 : event.target.value,
});
};
render() {
const { number } = this.state;
return (
<div className="App">
<h1>
Hola dinero <FormatNumber number={number} />
</h1>
<input type="number" onChange={this.handleChange} />
</div>
);
}
}
export default App;

Pueden dejar sus dudas o comentarios en está publicación o en el video, nos leemos en el siguiente tutorial.

Feliz día a todos 😄

Referencias