How can I make the program show the numbers I have clicked on the calculator?

I am trying to complete this user story:
User Story #8: As I input numbers, I should be able to see my input in the element with the id of display .
But all I get when I click any of my numbers is ‘undefined’. I believe the issue has something to do with line 335, with “props.symbol”. I think that when the computer searches for the latest symbol that has been clicked, it is not finding it for some reason and returning ‘undefined’ instead of the symbol. Does anyone know why or what I must change so that the computer does find it?

Thanks for your time

Jaime

Your browser information:

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

Challenge: Build a JavaScript Calculator

Link to the challenge:

Yes, the problem is there:

  handleFormula() { 
    this.setState((state, props) => ({
      formula: state.formula + props.symbol
    }));  
  }

But the component props are empty - there is no symbol there.

If we look at how this callback is called in one of your button components:

	handleClick = () => {
		this.props.handleDisplay(this.props.symbol)
        this.props.handleFormula(this.props.symbol)
    }

Notice that that is getting called with the value you need as a parameter.

So, back around line 335, I would expect something more like this:

  handleFormula(symbol) { 
    this.setState((state) => ({
      formula: state.formula + symbol
    }));  
  }

Also, just to point out, all those button components, I would not expect them to be defined independently. I would expect a generic button component and you pass in the values you need, either my writing out the components like you’re doing or by mapping through an array of values. I would also expect that to be a functional component, but you may not have gotten to that yet.

4 Likes

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