Question 35123 in React native Question posted in
The official React Native documentation can be found here.

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 Filesnodejsnode.EXE
    Yarn: 1.22.15 - C:Program Files (x86)Yarnbinyarn.CMD
    npm: 8.13.2 - C:Program Filesnodejsnpm.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 FilesJavajdk-17.0.1binjavac.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
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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 !!


  2. 0

    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:

    {}
    Login or Signup to reply.
  3. 0

    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..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search