Front End Development Libraries Projects - Build a JavaScript Calculator

JavaScript
1

Tell us what’s happening:

I’ve done the calculator part but I don’t know how to constantly update the <h2>{value}</h2> so that the value in Screen is always up-to-date with this.state.value

Your code so far

https://codepen.io/khaledkanan/pen/YzBzZxN

Your browser information:

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

Challenge Information:

Front End Development Libraries Projects - Build a JavaScript Calculator

2

Okay. First off; you can’t just directly import on Codepen. It doesn’t mesh well with Babel JSX processing and will cause things not to render on screen.

As for the Screen component, it never gets an update. It’s rendered once and completely forgotten. Secondly please don’t ever just pass your entire state to another component and never ever name it state. It’ll break things. For this exercise, it’s best to keep the screen component’s elements inside the App component.

But if I was going to pass down those values I’d do something like in the constructor:

const Screen = (props) => {

and in the calling location:

 <div className="outputScreen">
          <Screen data={{value:this.state.value,number1:this.state.number1,eq:this.state.eq,number2:this.state.number2}}/> 
        </div>

That’s literally the purpose of props; to hold all your data for a new component.

The only time I think a sub-component being used to render something is a good idea is if it doesn’t change or provides a special feature I can’t achieve normally.

Happy learning. :slight_smile:

If you have any further questions let me know.

1 Like
3

I did what you say but now <Screen /> is outputting “NaN”

Screen:

const Screen = (props) => {
  return(
    <div>
      <h2>{props.number1+props.eq+props.number2}</h2>
      <p id="display">{props.value}</p>
    </div>
  )
}
4

I changed the code but now it’s doing the same thing as before

const Screen = (props) => {
  return(
    <div>
      <h2>{props.data.number1+props.data.eq+props.data.number2}</h2>
      <p id="display">{props.data.value}</p>
    </div>
  )
}
5

Okay now that I’ve gotten that out of my system, you need to avoid directly setting the state. It’s generally a really bad idea.

React states are asynchronous and get updated in batches. By directly manipulating it, the value won’t be immediately updated.

Instead of calling

this.state.number1 = this.state.number1 + val

You should do the following:

this.setState(this.state.number1 + val);

That way React will be able to figure out that the UI and state both need updating.

Also please kindly move that handleButton and renewState variables out of the render method and make them full functions.

The function header should look a little like this.

 handleButton(val, KeyCode, id){
6

You do not have a single setState anywhere in your code.

You can’t just mutate the state, that isn’t how React works. It won’t know something has changed which means it doesn’t know to re-render if you do not update the state properly.

If you want to use class-based components you can revisit the React curriculum or find some old tutorials.

But if you have to learn React I would suggest you forget about class components and use functions/hooks. The new React docs are pretty good and most tutorials will teach functions and hooks.

7

Now my calculator (in the console) is outputting an empty string.

8

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