Integer 0 in an array JS reads as null

Tell us what’s happening:
I created an array ‘digits’ that contains ten arrays. Each array within digits contains an array with the name of the digit (a string) and a digit value(integer).
[‘zero’,0], [‘one’, 1], [‘three’, 3] etc.

With ‘padDigits’ method I am mapping ‘digits’ in order to render digits and their respective names to the screen.
‘padDigits’ render 10 buttons. Names of the digits are rendered as buttons ids. Digits themselves are rendered as numbers.

I get error:
‘id=“zero” is not yet defined : expected null to not equal null’
It appears that JS reads 0 value from the ‘digits’ array as null.

What is the way to workaround this?

Many thanks.

Your code so far

const digits=[
  ['zero',0],
  ['one',1],
  ['two',2],
  ['three',3],
  ['four',4],
  ['five',5],
  ['six',6],
  ['seven',7],
  ['eight',8],
  ['nine',9]
];
const operators=[
  ['plus','+'],
  ['minus','-'],
  ['multiply','*'],
  ['divide','/'],
  ['decimal','.'],
  ['equals','='],
  ['clear','AC']
]

class Calculator extends React.Component {
  render() {
    
  //render numbers to the screen     
    const padDigits=digits.map((arr,num,dig)=>{
      console.log(num);
      return (
        <button id='{arr[0]}'className='buttons'>{num}</button>   
      );
  });
    
    //render operators to the screen
    const padOperators=operators.map((arr,oper,arrArr)=>{
      
      return(
      <button id={arr[0]} className='buttons'>{arr[1]}</button>
      );
      
    });
   return (
   <div id='container'>
       <div id='display'>This is display</div>
       <div id='digits'>{padDigits}</div>
       <div id='operators'>{padOperators}</div>
       </div>
   
   
   );
  }
}

ReactDOM.render(<Calculator />, document.getElementById('App'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

could you also add the result/error you’re getting?

The id attribute value shouldn’t be a string.

<button id='{arr[0]}'className='buttons'>{num}</button>
1 Like

I do not get errors in the browser console. As I test the project in fcc, I get message:
“id=“zero” is not yet defined : expected null to not equal null
AssertionError: id=“zero” is not yet defined : expected null to not equal null
at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889)
at Proxy.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:1549)
at n. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:608:165530)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259477
at ny.Tg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259772)
at r.Qg.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274680)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:275616
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274033)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274103

I am not sure this helps. Don’t know what futher to look for. Can you advice me where to look for further errors (in case this doesn’t help).
Thanx

Just to be clear.

It is not reading the array value as null, it is reading the element as null because it can’t find it and getElementById returns null if the element is not found.

To reiterate, you are not getting the value from the array because you have turned it into a string instead of the evaluated value inside the map. If you look at the DOM you will see that all the ids on the buttons are {arr[0]} as a string and not the value from the array.


Just as an aside, I would suggest using an array of objects and not nested arrays.

1 Like

Tell us what’s happening:
I must ask for more help with regards to the post I previously made. I did the correction, but the problem remains.

I created an array ‘digits’ that contains ten arrays. Each array within digits contains an array with the name of the digit (a string) and a digit value(integer).
[‘zero’,0], [‘one’, 1], [‘three’, 3] etc.

With ‘padDigits’ method I am mapping ‘digits’ in order to render digits and their respective names to the screen.
‘padDigits’ render 10 buttons. Names of the digits are rendered as buttons ids. Digits themselves are rendered as numbers.

I get error:
‘id=“zero” is not yet defined : expected null to not equal null’
It appears that JS reads 0 value from the ‘digits’ array as null.

I am not sure of this, but the problem appears to be located within:

<button id={arr[0]} className='buttons'>{arr[1]}</button>

Kindly ask for help.

Many thanks.

Your code so far

const digits=[
  ['zero2',0],
  ['one',1],
  ['two',2],
  ['three',3],
  ['four',4],
  ['five',5],
  ['six',6],
  ['seven',7],
  ['eight',8],
  ['nine',9]
];
const operators=[
  ['plus','+'],
  ['minus','-'],
  ['multiply','*'],
  ['divide','/'],
  ['decimal','.'],
  ['equals','='],
  ['clear','AC']
]

class Calculator extends React.Component {
  render() {
    
  //render numbers to the screen     
    const padDigits=digits.map((arr,num,dig)=>{
      console.log(arr[0],num);
      return (
        <button id={arr[0]} className='buttons'>{num}</button>   
      );
  });
    
    //render operators to the screen
    const padOperators=operators.map((arr,oper,arrArr)=>{
      
      return(
      <button id={arr[0]} className='buttons'>{arr[1]}</button>
      );
      
    });
   return (
   <div id='container'>
       <div id='display'>This is display</div>
       <div id='digits'>
       <button>{padDigits}</button>
                  
       </div>
       <div id='operators'>{padOperators}</div>
       </div>
   );
  }
}
ReactDOM.render(<Calculator />, document.getElementById('App'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Challenge: Build a JavaScript Calculator

Link to the challenge:

there is typo where you define the first element in your digits arr, you have a value zero2. In this case zero is indeed not defined, if you try to target that id

2 Likes

Straight to the point! Love it! Thank you very much.
I do feel like an idiot bothering people with typos. Just can’t get rid of them. :grimacing:

1 Like

types are the hell for all of us :wink: , esp if you work for an extended period of time, you start to see the complex picture, but fail to see the small details

1 Like

Yeah, typos are tough. If you are working locally, you can set it up with spell checkers and code highlighting that will help you catch a lot of things. And you get better at spotting them. But they never go away completely.

1 Like

Typos are rough for sure but you also need to learn how to debug your code a bit better. You got the exact same error message again as before, pretty much for the same reason as before, but you are still focusing on the array and how you believe that JS is interpreting the 0 as null when that isn’t at all what is happening, nor what the error is telling you.

The test is using getElementById to look for the element with the ids. Again, when getElementById doesn’t find the element it returns null.

Not saying as a beginner debugging isn’t hard and that error messages can’t seem unhelpful. But don’t worry in time you will learn to debug your code better simply by the fact that you will have seen so many errors that they become less nebulous.

3 Likes

Yes, I was thinking that absent debugging know how I am bound to be repeating the same mistakes and to be asking for help for the same or similar questions. I will get there…some day.
Thank you for your help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.