The Calculator project

So I’m back to try again God knows why.

Here is the issue Vs code and windows 10 has started a vendetta on me.

I fix problems on one and then there is another to stop my code in the tracks.

I know this code is right I’ve done my research. So I just want some backup.

My React Calculator

Can you give us more details about the issue?

Its not rendering to the DOM.

I’m going back to Code Pen so you can see my code

React Calculator

This isn’t working either. all my project do this unless I copy and paste.

hey) I would suggest you to take a break and check you syntax carefully later. there multiple typos.

I don’t see any typos. I don’t understand why I’m not getting anything in result.

React Conponent
React.Compontent

should be

React.Component

Components are separated with commas for some reason etc. That is the reason why you dont see anything

you might want to check this carefully

upd : you cannot use comma randomly in your code, it’s an operator

I don’t have a clue why this isn’t working I’m so tried of looking at it really. I think this is it for me . this as far as it goes. I do understand what you are trying to tell me about the clock and I don’t see any reason there shouldn’t be something there

First, in your App component, you should wrap h1/Screen/KeyPad within one div tag.
Second, in your Screen component, change this.state.current and this.state.previous to this.props.current and this.props.previous.
Third, pass the state in your App component as props to the Screen.
I hope this could help you, but the most challenging part of this project is ahead. Cheers!

1 Like

It’s a part of learning :slightly_smiling_face:

It’s much better now, still there were mistakes
Just to show you that it can work: your App
Experiment with this, if something is wrong or missing it won’t render
Screen component in your current codepen version doen’t have state , and you refer to it

class Screen extends React.Component{
  render() {
    return(
    <div className= "outPut" id= "display">
        <div>{this.state.current}</div>
        <div>{this.state.previous}</div>
    </div>
    );
  }
}

I’m just really to give up its harder than I thought and takes longer than I thought .
I need something to help when I make a mistake to say hey did you mean to do this.

how did you run it codepen has no button to run

now it has, its in pen settings Auto-Updating Preview

I started over I cant find the problem :rage:

My Calculator

This is just not working this BS :face_with_symbols_over_mouth:

I can’t even render hello so sad I wish I knew what to do I think I need class with a teacher in it.

You have typos and syntax errors.

  1. You misspelled both extends and Component on the KeyPad component.

  2. The constructor syntax is wrong.

You have:

constructor(props)
  super(props);{
    this.state={
     previous :"",
      current : "0"};
  }

Should be:

constructor(props) {
  super(props);
  
  this.state = {
   previous :"",
    current : "0"
  };
  
}
  1. You didn’t close the h1 element.

  2. It is ReactDOM.render not React.render.

Coding is all about paying attention to detail. You have to be super vigilant about everything. One mistake and it’s likely game over, the code doesn’t run.


If you want to code this in React, I suggest you learn more about React first. Forget about this project and just learn React (scrimba course).

Find something you can have fun with and learn from. Stop trying to finish this project for at least a month and just learn about the tools (HTML/CSS/JS/React) by making stuff you care about and can have fun with. Because I don’t think you are having fun with this project and it really doesn’t matter if you finish this or not. What matters is that you learn and improve as much as possible by coding and building stuff.

Build more stuff, code more. You should have coded at least 20 other things by now other than this project. Again, my suggestion, forget about this project because, in my opinion, it is killing your learning progress. Don’t get stuck on this project keep moving forward.

3 Likes

Think you could learn Javascript first, then try React

1 Like

Ok, this is getting out of hand. Ok react has an update to use React.render and it also has ReactDOM. there is something wrong other than my mistakes. here is a templet for React it’s not rendering either.

App

you don’t have id ‘App’, it’s ‘app’, and you didn’t add react, only react-dom

i strongly recommend you to start with Javascript, React would make more sense

1 Like