Calculator (React) not passing tests... Help! :(

1

Edit: Thread re-opened. Edited the pen according to below coments.

Hey guys! After a few days of trying to build the calculator 100% on my own, I decided to ask for help. I simply don’t know why am I not passing the tests anymore, and would like some guidance before changing the code.

I could copy all the failing tests, but I think it’s easier for any of you interested to just get inside codepen and see the tests failing.

https://codepen.io/gerardcsaperas/pen/dyYaQEj?editors=0011

I can see the expected result for some of the “failing” tests, so maybe the problem is in the element with id=“display”…

2

Hello there,

Remember, React is state-based. If you are not using state, but other variables, you really need a good reason. So, this function is not doing anything helpful:

handleOperatorClick = (operator) => {
    this.displayNum = '';
    this.tempOperator += operator;
  };

Same goes for most of your code. You should be reading off of state properties, and re-setting state properties.

Also, when you define methods for a component, and use this on that method, you need to bind this to the method.

Statements like this seem like you are mixing class and functional components:

handleClick = () => {
		//Returns the number to the parent in order to be changed in the parent's state.
		this.props.onNumberClick(this.props.num);
	};

Either, define methods using 1 for functional components, or 2 for class components:

  • 1
const myComponent = () => {
  const myMethod = () => {
    ...
  }
  return(
    ...
  )
}
  • 2
class myComponent {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
  }
  myMethod() {
    ...
  }
  render() {
    return();
  }
}

I hope this helps

3

Dear Sky020,

First of all, thank you for your response. I appreciate it. It takes time to go through other people’s code.

I don’t know if you “played” with the app. It actually works, as far as I know, for most of the tests it’s not passing.

On binding “this”: I thought it was not needed when using arrow functions. In fact the callbacks working kinda prove that.

For starters, I will refactor my code in order to use only state, no functions. I can absolutely see your point there. I don’t think that solves the issues with the tests, but at least will let me practice further on a topic I am not yet completely comfortable. :smiley:

4

Right, but you can see that some of the tests are failing, because your components are not updating, because their state is not changing, but some local variables.

Perhaps you are correct about the bindings, but I would not be surprised if your encountered related errors, still.

5

Hey Sky!

Today I re-wrote thecode completely. Still have the exact same errors.

I did all you said above I believe.

  1. I used exclusively state.
  2. I bound this to the functions.

Still having the exact same errors when I test…

6

I am not sure I can help you get through the errors. I will give you some tips:

  1. Take advantage of React. When I did this project, I had 2 components; The main component with the displays, and one other that I mapped over an array of buttons to create the however-many buttons.
  2. With methods like this, what do you think it is returning to?:
handleClick() {
		return this.props.onOperatorClick(this.props.value);
	};
  1. You do not need state in a component that does not manipulate it:
class Equals extends React.Component {
	constructor(props) {
		super(props);
		this.state = {};
	};
	render() {
		return (
			<button className="btn btn-secondary col" id="equals" onClick={this.props.onEqualClick}>
				=
			</button>
		);
	};
}
  • In fact, you do not even need the constructor here.

This may not be the best advice for you, but when I got stuck on a project, I would leave it for a while, then return, after completing some other things (hopefully, to do with the tool I got stuck with). Usually, once I return, things just click in my mind.

I hope this helps.

7