ReactJS: How to fix numerical rows values length with toFixed(2)

Question

I am printing the data fetched from an API into a table, and I am facing some difficulties to fix the rows numerical values to decimals. If the rows data within the API consists of numerical values, i.e. 10.0, 333, 8 or 100, etc. to render it in the end with decimal values -> 10.00, 333.00, 100.00.

The function that I am familiar with .toFixed(2), doesn't function in the same way in React, as I used to code it in javaScript. I think I am misleading the ES6 standard, but I am not sure. Here is how it's look like, if I avoid using .toFixed(2).

Here is my code sample with rows.toFixed(2), but it's doesn't function well:

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: []
        }
    }

    componentDidMount()
    {

        fetch( "http://ickata.net/sag/api/staff/bonuses/" )
            .then( function ( response )
            {
                return response.json();
            } )
            .then( data =>
            {
                this.setState( { rows: data.rows, columns: data.columns } );
            } );

    }

    render()
    {

        return (
            <div id="container" className="container">
                <h1>Final Table with React JS</h1>
                <table className="datagrid">
                    <thead>
                        <tr> {
                            this.state.columns.map(( column, index ) =>
                            {
                                return ( <th>{column}</th> )
                            }
                            )
                        }
                        </tr>
                    </thead>
                    <tbody> {
                        this.state.rows.toFixed(2).map( row => (
                            <tr>{row.toFixed(2).map( cell => (
                                <td>{cell}</td>
                            ) )}
                            </tr>
                        ) )
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

You are welcome to contribute directly to my Repo: Fetching API data into a table

Here is how looks like my example, when the .toFixed has been used:

Unfortunately I was not able to find related documentation at ReactJs.org

It's doesn't function with rows[].length.toFixed(2) either.

Any suggestions will be appreciated!

score 6 · Accepted Answer · edited Dec 07 '17 at 16:59

6

You're called toFixed(2) agains this.state.rows, which is an array - this is probably throwing an error which will make the render fail. This explains why you're not seeing anything on the screen.

I suspect you want something more like this:

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

In this version, we look at each cell - if the content is a number, we call toFixed(2) on it before rendering - otherwise we just render it. Technically this answer is correct, but it prints as well age row values, which should not be decimals. I guess i have to hardcode the rows[3] value.

edited Dec 07 '17 at 16:59

andimit

35
1
10

answered Dec 07 '17 at 15:59

Duncan Thacker

5,073
1
10
20

Hey @Duncan Thacker unfortunately I am getting the same result, as mine described above. Just empty blank page. The app is not rendering at all. But I will play a bit with your suggestions. I guess I need a new function isNumber(). Thanks a lot! – andimit Dec 07 '17 at 16:09
Ah, sorry - I generally use the one from lodash. – Duncan Thacker Dec 07 '17 at 16:16
Duncan answer is right. It should work this way. @andimit : What do you use to debug ? You should either have a transpilation error if you made a syntax typo or a javascript console error in your browser. React errors are almost never silent. – Okazari Dec 07 '17 at 16:22
@Okazari I do not have a transpilation error, it transpiles automatically through Gulp, but in this case I also double checked with babejs and still I can't print anything, simply because I don't have the .isNumber() function. – andimit Dec 07 '17 at 16:27
Well, if since `isNumber()` doesn't exist in javascript, you should try out with `typeof cell === 'number'`. I'm surprised your don't have any error in your javascript browser console. – Okazari Dec 07 '17 at 16:31
Here is my console output: ReferenceError: isNumber is not defined Stack trace: ReferenceError: isNumber is not defined [Learn More] Thank's for the advice with typeof is working perfectly! – andimit Dec 07 '17 at 16:34
Always look here first. Before using Duncan's code, you probably had something like `this.state.rows.toFixed is not a function`. Don't forget to provide this kind of information when writing a question to SO :). – Okazari Dec 07 '17 at 16:37
@Okazari It's technically correct, but I am printing as well age rows values as decimals, which is not right. Looking forward for some suggestions in order to print only the required numerical fields, such as prices, bonuses etc. – andimit Dec 07 '17 at 16:41
@andimit What i did in my current application is to add by myself a type to the column. If check the type and format the data according to it. You cannot automate this if you don't know the meaning of the number. For javascript, numbers are numbers, nothing else. – Okazari Dec 07 '17 at 16:46
@Okazari I could't get your point. columns and rows are two separate `arrays`. What's your idea to define `typeof columns`, when all columns are string values? – andimit Dec 08 '17 at 11:01

andimit · Answer 2 · 2017-12-07T16:59:53.233

1

Greetings to @Okazari for the suggestion. Here is the technically correct answer, but not logically:

this.state.rows.map( row => (
<tr>{row.map( cell => (
<td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
) )}
</tr>
) )

It's not logical, because the age row values are printed as well as decimal, only the price values should be decimals. Further suggestions will be appreciated!

edited Dec 07 '17 at 16:59

answered Dec 07 '17 at 16:38

andimit

35
1
10

ReactJS: How to fix numerical rows values length with toFixed(2)

2 Answers2