React hooks calculator

Project Feedback
#1

Hey everyone,

I’ve just completed my react calculator using hooks. Feedback is appreciated.
Live Preview Link to GitHub

#2

Cool, it looks pretty good. On a quick scan, the only thing that really caught my eye is:

<Pad type={type} content={content} onClick={(e) => handleClick(e)}>

specifically,

onClick={(e) => handleClick(e)}

Usually this can be shortened to:

onClick={handleClick}

The onClick is passing in that parameter and the handleClick knows to use that first one. The only time I’ve seen this become a problem is if there are optional parameters in function and the caller is sending unwanted additional parameters - I can’t remember what onClick sends.

The only other thing is that I would have put the style information into a different file, especially in App.js - half that file is just style information.

But still, it looks good. Have fun on the next project.

#3

Thanks for your feedback @kevinSmith.

  1. I will update that handleClick function.

  2. I’ve recently started using styled-components for React applications, so I don’t really know the folder structure so as to where to store the styles information, so I kept them within the React components.

#4

I’ve never used them before myself. But it would be easy to create a file called App.styles.js, put them in there and export/import. That’s what I usually do with my styles in React and React Native projects.

1 Like