React Calculator Feedback / Advice

Code Feedback
1

Hi all, I was wondering if anyone could provide their advice and feedback on my React calculator. I’ve passed all the unit tests from FreeCodeCamp, but I’m looking for additional areas to improve the calculator. I would also appreciate if you could provide feedback on the code itself, as I was having a hard time finding out how to create reusable variables across all my bind functions in the App component. , as well as finding an alternative to using the eval() method.

Hosted project: https://react-calculator-application.herokuapp.com/
Code: https://github.com/lhuddlesto/react-calculator

2

Looks Code Well done man Keep Improving i fell late in response time rest are good

3

Ways to break:
1. Enter numbers until display shows ‘ERR’. Enter operand (say +). Done.
2. Do an operation to get negative number (5 - 6), press +/- button. Done.

Classic calculator test: 0.1 + 0.2 = ?

Layout or buttons 3 2 1 seems out of order.

Regarding code.
You won’t need to bind in constructor if you’ll use arrow functions. And then you can put state (without this) directly in component body and get rid of constructor altogether.

Not a fan of e.target.innerHTML. You could pass an argument from Button:

<div className="button" onClick={() => props.clickNum(9)} id="nine">9</div>

Use meaningful variable names, not val and num.

Try to avoid using let. If you need to reassign a variable, think twice.

"eval() is evil", but for this project it’s the simplest solution.

1 Like
4

Thanks so much for your extensive feedback! I think I addressed the breaking errors you mentioned. As for the adding 0.1 and 0.2, I added in a temporary fix, but I plan on creating some regex for answers with repeating zeroes. After that I want to address the variable names and an alternative to e.target.innerHTML.

Do you think you could further explain the bit about using arrow functions? Like maybe an example?

For the eval thing, I found a library called math.js that allows you to evaluate a string without using JavaScript’s eval() method, and it’s safer from what I’ve read.

5

Here’s a quick example without binding: https://codepen.io/jenovs/pen/xBRBVN?editors=0010

…and introduced additional complexity to your code (not a bad thing per se, just saying :slight_smile:).
.eval() is still the simplest solution.