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