React JS Access variable outside of scope

Question

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 {
    componentDidMount() {
        //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>
        )
    }
}

Gui Herzog · Accepted Answer · 2017-02-22 10:34:36Z

2

While the answer above is valid, it's always good to write modular code and keep your react components 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 components.
    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!

edited Feb 22, 2017 at 10:34

answered Feb 22, 2017 at 10:00

Gui Herzog

5,6752 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Filth Over a year ago

Thank you very much mate. I'm completely in favour of stateless components as it's a much cleaner way of creating react components. Will mark this as the appropriate solution for others.

Gui Herzog Over a year ago

That's true! I took some time to get used with this stateless concept! Cheers

J.B · Accepted Answer · 2017-02-22 09:53:31Z

2

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

Something like

export default class ListUnitItem extends React.Component {
    componentWillMount() {
        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>
        )
    }
}

answered Feb 22, 2017 at 9:53

J.B

605 bronze badges

1 Comment

Filth Over a year ago

Mate that is perfect! Was close I guess haha. Thanks mate!

Mayank Shukla · Accepted Answer · 2017-02-22 09:55:45Z

1

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;            
}

answered Feb 22, 2017 at 9:55

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Collectives™ on Stack Overflow

React JS Access variable outside of scope

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related