Calculator - ReactJS + styled-components

Hello everyone! 👋

Another project with React! This calculator was quite fun to make and I constantly ran into so many issues with each step. Fixed them all, though! 😁

This project was my first foray into CSS-in-JS and component-scoped styles. I originally started off with emotion since I read somewhere that it was more efficient than styled-components. However, as I developed the calculator, I found out that emotion re-renders components completely when dynamic props used in styling change. This was a problem as I couldn't incorporate CSS transitions when, for example, the background-color of a certain element changed, as the element was completely re-rendered.

After some research, I discovered that styled-components separates component classes into static and dynamic classes. When dynamic props change, only the dynamic class of a certain component changes instead of it being re-rendered. This naturally allowed for CSS transitions, and styled-components was thus a winner for me!

While developing the calculator, I started off with an approach that stored the calculator display state as a numerical value. However, this meant that I would have to define what the press of each key would entail for the display state, separately. This also meant that displaying values such as "0.04" and "3." would become impossible since the decimal point was removed when converting to a Number.

I, therefore, decided to store the display state as a String (for example, "12 + 0.3 / 2") and then let Javascript's eval function handle the calculation. I have read that the eval function can be dangerous to use, however. Do you guys have any other suggestions or replacements?

Any feedback on the app is highly appreciated, thanks! ✌