This tutorial is a small React learning project: a user selects a fuel type, enters an amount, and sees a receipt-style total calculated from sample prices stored in a JSON object. It is not an official Shell service or a source of current fuel prices.
What the calculator does
The demo presents a fuel dropdown, an amount field, and a Calculate action. When the form is submitted, the component looks up the selected fuel’s sample price, multiplies it by the entered amount, and renders the result in a receipt-like view.
As an Amazon Associate I earn from qualifying purchases.
The author describes the project as split into Header and Content components. That is one implementation choice for this small example, not a required React structure. Hashimov explains, “The goal isn’t to claim I’ve created something "never seen before," but to explain why I made these specific choices.”
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchHow the JSON data and calculation fit together
A JSON object holds the example prices and is imported into the component, keeping the values together rather than embedding each one in the calculation logic. The selected fuel type serves as the lookup key. The calculation is:
#1 Best Overall
total = price[selectedFuel] * amount
The source describes parsing the amount from the form input before using it in the multiplication. The JSON values are illustrative code data, not verified fuel rates:
| Fuel option in the example | Sample value |
|---|---|
| AI-92 gasoline | 1.15 |
| AI-95 gasoline | 1.60 |
| AI-98 gasoline | 2.30 |
| Diesel | 1.10 |
| LPG | 0.45 |
| Methane/CNG | 0.40 |
| Electricity | 0.125 |
The tutorial does not specify a currency, geography, measurement basis, or date for these figures, and it does not identify an external price source. They should therefore be treated only as sample inputs for the demo, not as prices a driver can expect to pay.
Why the example uses useState
The form’s selected values and calculated result need to be available to the component UI. The tutorial uses React’s useState to hold that information so the interface can render the current selection and result. In the example’s flow, state connects the user’s choices to the displayed calculation; the JSON object supplies the price data.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What the tutorial establishes—and what it does not
Hashimov’s DEV Community article, “Mini "Shell" Gas Station with React: useState and JSON DB, is an educational walkthrough of this compact form-and-calculation pattern. It does not establish how to validate input, round or format currency, update prices, persist data, deploy the app, or prepare it for production. Those behaviors should not be assumed to exist in the demo.
The author’s closing note says, “This site is for educational purposes only and has no affiliation with the Shell company.” The name is used in the tutorial title; the project is not a Shell product, an active gas-station service, or a current-price guide.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
