Large numbers in React

Question

I have a Bigint column in my Table in SQL server as a Primary Key and when I request from a client with axios or fetch in React, it has a problem with ids like 9223372036854775800 and converts all of them to 9223372036854776000 !!!,

How can I fix that?

Covering

you should not use it as number, use string. and it's not related to reactjs. it's javascript issue. – Feudist

Possible duplicate of What is JavaScript's highest integer value that a number can go to without losing precision? – Windswept

Send a string from the server and use BigInt – Windswept

@Windswept how can I use BigInt in react? – Covering

Click the link the in the comment. – Windswept

Answer 1

For resolve this problem you can send on the front-end string instead of number. Native js not support big number. If you want work on front-end with big number, you can use bignumber js library: https://github.com/MikeMcl/bignumber.js/

In your case: 1. send string on front-end. 2. get number as string and create BigNumber('9223372036854775800')

Starlike

Thank you, but this package in React makes an array of digits of number and not return number, but with npmjs.com/package/big-integer it is ok. – Covering

Answer 2

To enable the BigInt in React as of now you have to add this comment to your code:

/* global BigInt */

Please, refer to this.

Tressietressure

this is an insane mine field. Thanks, fixed it for me. – Grisby

Answer 3

In your MySQL connection config, give a property

supportBigNumbers: true,

Bartolomeo

Answer 4

add es2020 support in package.json eslint config block like:

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "env": {
    "es2020": true
  }
}

and dont forget to restart your server

Durden