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:
, esp if you work for an extended period of time, you start to see the complex picture, but fail to see the small details