I'm trying to format numbers using numeral js - this is working I log number.

How can I access the let number whilst it's outside of the render function to pass down to the element "unit-item-number"?

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    ponentDidMount() {
        //format numbers greater than 1000
        let number = this.props.number;
        if(number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        } else {
            return number
        }
        console.log(number);
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.props.number}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

I'm trying to format numbers using numeral js - this is working I log number.

How can I access the let number whilst it's outside of the render function to pass down to the element "unit-item-number"?

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    ponentDidMount() {
        //format numbers greater than 1000
        let number = this.props.number;
        if(number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        } else {
            return number
        }
        console.log(number);
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.props.number}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

• javascript
• reactjs

3 Answers 3

While the answer above is valid, it's always good to write modular code and keep your react ponents stateless (without having state variables). The following code shows a better approach to your problem:

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    // Save this method in some Utils class where you can access from other ponents.
    getFormattedNumber(number){
        //format numbers greater than 1000
        if (number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        }
        return number
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.getFormattedNumber(this.props.number)}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

I hope this helps!

I would personally put this into state using this.setState({}) in the ponentWillMount function.

Something like

export default class ListUnitItem extends React.Component {
    ponentWillMount() {
        let number = this.props.number;

        if(number > 1000) {
            number = numeral(number).format('0.0a');
        }

        this.setState({number})
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.state.number}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

You don't require any lifecycle method for this, because if any change happens in the props value, formatter will not get applied on that, use it like this:

<li className="list-unit-item col-sm-2">
     <span className="unit-item-number">{this._fromatNum()}</span>
     <span className="unit-item-title">{this.props.title}</span>
</li>

_fromatNum(){
     let number = this.props.number;
     if(number > 1000) {
         number = numeral(number).format('0.0a');
     }
     return number;            
}