CODEWITHSUNDEEP
reactjstypescriptreact-native
jack
jack

Reputation: 575

React native typescript number 0 read as NaN

I am trying to map an array and to use its values or keys as data for my return in React Native (Android). Can anyone explain why the value 0 is being read as NaN? I have noticed the same issue when using an typescript enum.

I am using: typescript v.4.7.4, RN 0.69.2 and react 18

Simple code example with console output:

const R = [...Array(4).keys()];
R.map((_i, key) => {
  console.log(_i, key);
}); 


Output: 
NaN NaN  // value 0 is interpreted as NaN ???
1 1
2 2
3 3

This only seems to happen when the value is assessed directly via console.log or the VSCode inspector in debug mode. Whenever I use à template string the value is correctly displayed.

R.forEach(i => {
  console.log(`value is : ${i} is ${typeof i}`);
  console.log(i);
});

Output: 
value is : 0 is number
NaN
value is : 1 is number
1
value is : 2 is number
2
value is : 3 is number
3

Any help is appreciated.

output for 'npx react-native info'

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 11.90 GB / 31.92 GB
  Binaries:
    Node: 18.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 31, 33
      Build Tools: 30.0.3, 33.0.0
      System Images: android-32 | Google APIs Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64, android-33 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Enabled
      AllowDevelopmentWithoutDevLicense: Enabled
      Versions: 10.0.19041.0
  IDEs:
    Android Studio: AI-212.5712.43.2112.8609683
    Visual Studio: 17.1.32328.378 (Visual Studio Community 2022), 16.11.32106.194 (Visual Studio Community 2019)
  Languages:
    Java: 17.0.1 - C:\Program Files\Java\jdk-17.0.1\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.2 => 0.69.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Upvotes: 9

Views: 798

Answers (3)

jack
jack

Reputation: 575

As it turns out, this is some kind of issue with VSCode.

The NaN output only appears when using the VSCode Debug Console or the active VSCode debugger (hovering over the variable).

The logcat output is correct. Furthermore, console.log(typeof variable) shows the variable type to be number (which is indeed correct).

const R = [...Array(4).keys()];
R.map((_i, key) => {
  console.log(_i, key,typeof _i,typeof number);
}); 

Output in VSCode Debuger Console: 
NaN NaN number number
1 1 number number
2 2 number number
3 3 number number

Output via Logcat
0 0 number number
1 1 number number
2 2 number number
3 3 number number

Thanks for your help everyone !!

Upvotes: 6

Shameel Uddin
Shameel Uddin

Reputation: 603

Snippet

const R = [...Array(4).keys()];

Output

[undefined, undefined, undefined, undefined, undefined]

This may cause some problems as everything in there is undefined.

The better approach that I myself used in my code is this:

Snippet

const R = Array.from({length: 5}, (_, i) => i);
R.map((_i, key) => {
  console.log(_i, key);
});

Output

0 0
1 1
2 2
3 3
4 4

Here R is this Array: [0, 1, 2, 3, 4] which removes any inconsistency within the code..

Upvotes: 0

DialFrost
DialFrost

Reputation: 1780

For me on typescriptlang.org using React Native, Target ES2017 and Module ESNext, I get the correct output:

Output: 
0, 0
1, 1
2, 2
3, 3

However your error might have something to do with this:

console.log([...Array(4)]);

Which produces:

[undefined, undefined, undefined, undefined]

So maybe taking the key() of the first undefined value gave a NaN? Using this:

console.log([undefined].keys());

Gives:

{}

Upvotes: 0

Related Questions