Decimal format number React

Question

I use axios for API queries and NumberFromat to change the decimal number. Here is the App.js:

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import web3 from "./web3";
import NumberFormat from 'react-number-format';

export default class PersonList extends React.Component {
  state = {
    balance: '',
    bn: '',
    persons: []
    };

  async componentDidMount() {
    const balance = await web3.eth.getBalance("0x2f6aA9e80385316eEe006AB8bB7943abF333A063") / 1e18;
    const bn = financial(balance);
    const axios = require('axios');

    function financial(x) {
      return Number.parseFloat(x).toFixed(2);
    };

    axios.get(`https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=USD`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })

    this.setState({ balance, bn });
    };

  render() {


    return (
      <div>
        <p>
          {this.state.persons.map(person => <p>"portfolioValue": {this.state.bn}, "usdeth": {person.price_usd}</p>)}
        </p>
      </div>
    );
  }
}

It's displayed as

"portfolioValue": 0.06, "usdeth": 93.270616772

So, I need to change the number of decimals of the second value like so 93.27. Looks like the easy task, but I stuck with it.

As I see you don't need import NumberFormat from 'react-number-format';. Check this out. — Vadim
– Vadim, Commented Dec 18, 2018 at 9:43

Rom · Accepted Answer · 2018-12-18 09:44:53Z

You had some problems:

You should require('axios') at the top file, not in componentDidMount, that will be good performance. Edit: you've import, so don't need require it again
Your function financial should be an utility, that mean it is useful, should be declared in class, not in function componentDidMount.
At person.price_usd, you don't use financial, so it's not working.

This is solution

import React from 'react';
import './App.css';
import axios from 'axios';
import web3 from "./web3";
// useless library
// import NumberFormat from 'react-number-format';

// Require Axios here for better performance
// const axios = require('axios');

export default class PersonList extends React.Component {
  state = {
    balance: '',
    bn: '',
    persons: []
  };

  // place here for best utilities
  financial = (x) => Number.parseFloat(x).toFixed(2);

  async componentDidMount() {
    const balance = await web3.eth.getBalance("0x2f6aA9e80385316eEe006AB8bB7943abF333A063") / 1e18;
    const bn = this.financial(balance);

    axios.get(`https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=USD`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })

    this.setState({ balance, bn });
  };

  render() {
    return (
      <div>
        <p>
          {this.state.persons.map(person =>
            <p>"portfolioValue": {this.state.bn}, "usdeth": {this.financial(person.price_usd)}</p>)
          }
        </p>
      </div>
    );
  }
}

Dhaval Patel · Accepted Answer · 2018-12-18 09:59:53Z

0

you should use below mentioned code.

render() {

    return (
        <div>
            <p>
                {this.state.persons.map(person =>
                    <p>"portfolioValue": {this.state.bn}, "usdeth": {this.financial(person.price_usd)}</p>)
                }
            </p>
        </div>
    );
}

edited Dec 18, 2018 at 9:59

answered Dec 18, 2018 at 9:30

Dhaval Patel

7,6116 gold badges43 silver badges72 bronze badges

Collectives™ on Stack Overflow

Decimal format number React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related