Build a Simple React Currency Converter: A Beginner’s Guide

Written by

FixTechToday

in

In today’s interconnected world, understanding and converting currencies is a fundamental skill. Whether you’re planning a trip abroad, managing international finances, or simply curious about exchange rates, a currency converter is an invaluable tool. This article guides you through building a simple, yet functional, currency converter using ReactJS. This project is perfect for beginners looking to solidify their understanding of React’s core concepts while creating something practical and useful.

Why Build a Currency Converter?

Creating a currency converter offers several benefits for aspiring React developers:

  • Practical Application: You’ll build something you can actually use.
  • API Integration: You’ll learn how to fetch data from a public API, a crucial skill for web development.
  • State Management: You’ll practice managing component state to handle user input and display dynamic results.
  • Component Composition: You’ll learn how to break down a complex task into smaller, manageable components.

By the end of this tutorial, you’ll have a fully functional currency converter, and a deeper understanding of React fundamentals.

Prerequisites

Before we dive in, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the React development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor of your choice.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app currency-converter
cd currency-converter

This command creates a new React project named “currency-converter” and navigates you into the project directory. Next, start the development server:

npm start

This will open your app in your web browser, typically at http://localhost:3000. Now, let’s clean up the boilerplate code. Open the `src` directory in your project, and delete the following files: `App.css`, `App.test.js`, `logo.svg`, `reportWebVitals.js`, and `setupTests.js`. Then, modify `App.js` to look like this:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Currency Converter</h1>
    </div>
  );
}

export default App;

Also, create a new `index.css` file in the `src` folder and add some basic styling to it. For instance:

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.App {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

input, select {
  padding: 8px;
  margin: 10px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.result {
  margin-top: 20px;
  font-weight: bold;
}

Finally, import `index.css` into your `index.js` file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Fetching Currency Exchange Rates

To convert currencies, we need real-time exchange rates. We’ll use a free currency exchange API for this. There are many available, but for this tutorial, we’ll use ExchangeRate-API. Sign up for a free API key (if required by the specific API you choose). Then, let’s create a new file named `api.js` in the `src` directory to handle API calls:


// src/api.js
const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key
const BASE_URL = 'https://v6.exchangerate-api.com/v6/';

export async function getExchangeRates(baseCurrency) {
  const url = `${BASE_URL}${API_KEY}/latest/${baseCurrency}`;
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching exchange rates:', error);
    return null;
  }
}

Make sure to replace `YOUR_API_KEY` with your actual API key. This function fetches the latest exchange rates for a given base currency. It uses the `fetch` API to make a GET request to the ExchangeRate-API. It also includes error handling.

Building the Currency Converter Component

Now, let’s build the `CurrencyConverter` component in `App.js`. First, import the `getExchangeRates` function from `api.js`.

import React, { useState, useEffect } from 'react';
import { getExchangeRates } from './api';

Then, define the component and its state:


function App() {
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [exchangeRates, setExchangeRates] = useState(null);
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]); // To store the available currencies

  useEffect(() => {
    async function fetchCurrencies() {
      const url = `https://v6.exchangerate-api.com/v6/${API_KEY}/codes`;
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        if (data && data.supported_codes) {
          const codes = data.supported_codes.map(item => item[0]);
          setCurrencies(codes);
        }
      } catch (error) {
        console.error('Error fetching currencies:', error);
      }
    }
    fetchCurrencies();
  }, []);

  useEffect(() => {
    async function fetchData() {
      const data = await getExchangeRates(fromCurrency);
      if (data && data.conversion_rates) {
        setExchangeRates(data.conversion_rates);
      }
    }
    fetchData();
  }, [fromCurrency]);

  useEffect(() => {
    if (exchangeRates) {
      const rate = exchangeRates[toCurrency];
      if (rate) {
        setConvertedAmount((amount * rate).toFixed(2));
      }
    }
  }, [amount, toCurrency, exchangeRates]);

  const handleAmountChange = (e) => {
    setAmount(e.target.value);
  };

  const handleFromCurrencyChange = (e) => {
    setFromCurrency(e.target.value);
  };

  const handleToCurrencyChange = (e) => {
    setToCurrency(e.target.value);
  };

  return (
    <div className="App">
      <h1>Currency Converter</h1>
      <div>
        <label>Amount:</label>
        <input
          type="number"
          value={amount}
          onChange={handleAmountChange}
        />
      </div>
      <div>
        <label>From:</label>
        <select value={fromCurrency} onChange={handleFromCurrencyChange}>
          {currencies.map((currency) => (
            <option key={currency} value={currency}>{currency}</option>
          ))}
        </select>
      </div>
      <div>
        <label>To:</label>
        <select value={toCurrency} onChange={handleToCurrencyChange}>
          {currencies.map((currency) => (
            <option key={currency} value={currency}>{currency}</option>
          ))}
        </select>
      </div>
      {convertedAmount !== null && (
        <div className="result">
          {amount} {fromCurrency} = {convertedAmount} {toCurrency}
        </div>
      )}
    </div>
  );
}

export default App;

Let’s break down this code:

  • State Variables:
    • `amount`: Stores the amount to be converted (default: 1).
    • `fromCurrency`: Stores the base currency (default: ‘USD’).
    • `toCurrency`: Stores the target currency (default: ‘EUR’).
    • `exchangeRates`: Stores the fetched exchange rates from the API.
    • `convertedAmount`: Stores the calculated converted amount.
    • `currencies`: Stores an array of supported currency codes.
  • `useEffect` Hooks:
    • The first `useEffect` hook fetches the list of available currencies from the ExchangeRate-API. It uses the `/codes` endpoint.
    • The second `useEffect` hook fetches the exchange rates whenever the `fromCurrency` changes.
    • The third `useEffect` hook calculates the converted amount whenever `amount`, `toCurrency`, or `exchangeRates` changes. It uses the fetched `exchangeRates` to perform the conversion.
  • Event Handlers:
    • `handleAmountChange`: Updates the `amount` state when the input field changes.
    • `handleFromCurrencyChange`: Updates the `fromCurrency` state when the ‘From’ select field changes.
    • `handleToCurrencyChange`: Updates the `toCurrency` state when the ‘To’ select field changes.
  • JSX: The component renders the UI, including:
    • An input field for the amount.
    • Two select fields for the currencies (using the fetched `currencies`).
    • A display of the converted amount (conditionally rendered).

Handling User Input and Displaying Results

The code includes event handlers to capture user input and update the component’s state. When the user types in the amount, the `handleAmountChange` function updates the `amount` state. Similarly, the `handleFromCurrencyChange` and `handleToCurrencyChange` functions update the `fromCurrency` and `toCurrency` states when the user selects different currencies. The `useEffect` hooks then automatically update the exchange rates and calculate the converted amount based on these state changes.

The converted amount is displayed in a `div` element with the class “result”. This `div` is conditionally rendered only when `convertedAmount` is not null, ensuring that the result is only displayed after the calculation has been performed.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • API Key Security: Never hardcode your API key directly in your client-side code (like in `api.js`). This makes your key visible to anyone who views your website’s source code. Instead, store it in an environment variable or use a backend server to proxy the API requests.
  • Error Handling: Always include error handling in your API calls. The `try…catch` blocks in the `getExchangeRates` function and the currency fetching functions are crucial for catching and handling potential errors. Display meaningful error messages to the user if an API call fails.
  • Asynchronous Operations: React components re-render when their state changes. Ensure that you handle asynchronous operations (like API calls) correctly to avoid unexpected behavior. Use `async/await` and `useEffect` hooks to manage these operations.
  • Data Types: Ensure the data types are correct. For example, convert the amount from the input field to a number using `parseFloat()` before performing calculations.
  • Currency Selection: Ensure your currency codes are valid and supported by the API. The `currencies` state variable, populated by the API call to `/codes`, helps in displaying only the supported currencies to the user.
  • Rate Limiting: Be aware of the API’s rate limits. Excessive API requests may lead to your API key being blocked. Implement strategies to prevent this, such as caching the exchange rates or adding a delay between requests.

Enhancements

This is a basic currency converter. Here are some ideas to enhance it:

  • Add more currencies: Expand the currency list.
  • Implement a history feature: Store and display the last few conversions.
  • Add a “reverse conversion” button: Convert from the target currency back to the base currency.
  • Improve the UI: Add more styling and make it responsive.
  • Add a loading indicator: Show a loading indicator while fetching data from the API.
  • Implement caching: Cache the exchange rates to reduce API calls.

Summary / Key Takeaways

Building a currency converter in React is a great way to practice fundamental React concepts like state management, API integration, and component composition. This guide provides a step-by-step approach to create a functional currency converter. Remember to handle errors, secure your API key, and consider enhancements to make your converter more user-friendly and feature-rich. By completing this project, you’ve not only built a useful tool, but also strengthened your understanding of how React applications work. You’ve learned to fetch data from an external API, manage user input, and display dynamic information, all of which are essential skills for any React developer. The key takeaways are to pay close attention to state management, handle API calls asynchronously with proper error handling, and always consider the user experience through clear UI design and informative feedback. You can expand on this project by adding more features like a history log, better error handling, and more currencies. The possibilities are endless, and the more you practice, the more confident you will become in your React development skills.

More posts