Building a Simple React Calculator – 4 Ways

Varanasi Software Junction June 19, 2025
Building a Simple React Calculator – 4 Ways

Building a Simple React Calculator: 4 Ways to Choose Your Operation

By Champak Roy | June 19, 2025

🔗 View Source on GitHub

🚀 Introduction

When learning React, a great exercise is building interactive user interfaces with real-time data handling. One such beginner-friendly project is a simple calculator app. In this blog post, we will walk through four different ways to choose between Add and Subtract operations in a calculator UI:

  • Using two buttons
  • Using radio buttons
  • Using a select dropdown
  • Using a checkbox toggle

🛠️ 1. Basic Version with Two Buttons (Add/Sub)

In this version, we have two number inputs and two buttons: Add and Sub. When a button is clicked, the respective operation is performed.


const [num1, setNum1] = useState('');
const [num2, setNum2] = useState('');
const [result, setResult] = useState(null);

const handleAdd = () => setResult(parseFloat(num1) + parseFloat(num2));
const handleSub = () => setResult(parseFloat(num1) - parseFloat(num2));

User can click either Add or Sub to get the result.

🔘 2. Using Radio Buttons

Radio buttons are perfect when users must choose one option out of many.


<input type="radio" value="add" checked={operation === 'add'} onChange={...} />
<input type="radio" value="sub" checked={operation === 'sub'} onChange={...} />

Logic to calculate:


if (operation === 'add') setResult(a + b);
else if (operation === 'sub') setResult(a - b);

After selection, user clicks Calculate to view the result.

🔽 3. Using a Select Dropdown

This is a compact alternative to radio buttons and useful when you expect the list of operations to grow.


<select value={operation} onChange={(e) => setOperation(e.target.value)>
  <option value="add">Add</option>
  <option value="sub">Sub</option>
</select>

The calculation logic remains the same as before.

☑️ 4. Using a Checkbox as Toggle

Want to make the UI super clean? Use a checkbox to toggle between Add and Sub.


<input
  type="checkbox"
  checked={isAdd}
  onChange={(e) => setIsAdd(e.target.checked)}
/>

Then in the handler:


setResult(isAdd ? a + b : a - b);

Checkbox is checked → Add
Checkbox is unchecked → Sub

✨ Why This Matters

By implementing the same functionality with different UI controls, you:

  • Get comfortable with React state handling (useState)
  • Learn different HTML input types
  • Understand conditional rendering and controlled components
  • See how user experience changes with different inputs

🔚 Conclusion

This simple calculator not only helps understand how to structure React components but also demonstrates how different UI elements can shape user interaction.

Whether you're building a learning app, a pricing form, or a math tool — these techniques come in handy.

💡 Next Steps

  • Extend this calculator to include Multiply and Divide
  • Show a history of operations
  • Add form validation and error messages
  • Style with CSS modules or Tailwind CSS

📁 Source Code

If you'd like the complete working project as a downloadable file or want a demo version hosted online, visit the GitHub repository below.

🔗 View Project on GitHub

Post a Comment

0 Comments

Me