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

Written by

learnmodernjavascript

in

In today’s globalized world, dealing with different currencies is a common occurrence. Whether you’re planning a trip abroad, managing international finances, or simply curious about exchange rates, a currency converter is an incredibly useful tool. This tutorial will guide you through building a simple, yet functional, currency converter application using ReactJS. This project is perfect for beginners and intermediate developers looking to solidify their React skills while creating something practical.

Why Build a Currency Converter?

Creating a currency converter in React offers several benefits:

  • Practical Application: You’ll build a tool with real-world utility.
  • Skill Enhancement: You’ll practice fundamental React concepts like state management, component composition, and API calls.
  • Portfolio Piece: It’s a great project to showcase your React skills to potential employers.
  • Learning by Doing: Hands-on experience is the best way to learn any programming language or framework.

By the end of this tutorial, you’ll have a fully functional currency converter that fetches real-time exchange rates, allowing users to convert amounts between different currencies. Let’s get started!

Prerequisites

Before we begin, 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 crucial for understanding the code and styling the application.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).

Setting Up the Project

Let’s create a new React app 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 default web browser, usually at http://localhost:3000. You should see the default React app’s welcome screen.

Project Structure

Let’s take a quick look at the project structure. The key files we’ll be working with are:

  • src/App.js: This is the main component where we’ll build our currency converter UI and logic.
  • src/App.css: We’ll use this file for styling our application.
  • public/index.html: This is the main HTML file where our React app will be rendered.

Building the Currency Converter Component

Open src/App.js and clear the boilerplate code. We’ll start by defining the basic structure of our currency converter component.

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [exchangeRate, setExchangeRate] = useState(null);
  const [convertedAmount, setConvertedAmount] = useState(null);

  useEffect(() => {
    // Fetch exchange rates from an API here
  }, [fromCurrency, toCurrency]);

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

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

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

  return (
    <div className="currency-converter">
      <h2>Currency Converter</h2>
      <div className="input-group">
        <label>Amount:</label>
        <input
          type="number"
          value={amount}
          onChange={handleAmountChange}
        />
      </div>
      <div className="select-group">
        <label>From:</label>
        <select value={fromCurrency} onChange={handleFromCurrencyChange}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="GBP">GBP</option>
          <option value="JPY">JPY</option>
        </select>
      </div>
      <div className="select-group">
        <label>To:</label>
        <select value={toCurrency} onChange={handleToCurrencyChange}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="GBP">GBP</option>
          <option value="JPY">JPY</option>
        </select>
      </div>
      <div className="result">
        {convertedAmount !== null && (
          <p>{amount} {fromCurrency} = {convertedAmount.toFixed(2)} {toCurrency}</p>
        )}
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import React, useState and useEffect from React, and the CSS file.
  • State Variables: We declare several state variables using the useState hook:
    • amount: The amount to be converted (default: 1).
    • fromCurrency: The currency to convert from (default: USD).
    • toCurrency: The currency to convert to (default: EUR).
    • exchangeRate: The current exchange rate (initially null).
    • convertedAmount: The calculated converted amount (initially null).
  • useEffect Hook: This hook will be used to fetch exchange rates from an API whenever the fromCurrency or toCurrency changes. We will implement this logic later.
  • Event Handlers: We define three event handlers:
    • handleAmountChange: Updates the amount state when the input field changes.
    • handleFromCurrencyChange: Updates the fromCurrency state when the “From” select element changes.
    • handleToCurrencyChange: Updates the toCurrency state when the “To” select element changes.
  • JSX Structure: The JSX returns the following elements:
    • A div with the class “currency-converter” to contain the entire component.
    • An h2 heading for the title.
    • An input field for the amount and two select elements for choosing the currencies.
    • A div with the class “result” to display the converted amount.

Now, let’s add some basic styling to src/App.css:

.currency-converter {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.input-group, .select-group {
  margin-bottom: 15px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="number"], select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.result {
  font-size: 1.2em;
  margin-top: 20px;
}

This CSS provides basic styling for the layout, input fields, and result display.

Fetching Exchange Rates from an API

To get real-time exchange rates, we’ll use a free API. There are many available, but for this tutorial, we’ll use ExchangeRate-API. You can sign up for a free API key if you need a higher rate limit, but it’s not strictly necessary for this tutorial. If you choose to sign up, store your API key in a `.env` file in the root of your project, like so: REACT_APP_API_KEY=YOUR_API_KEY. You can then access it in your code using process.env.REACT_APP_API_KEY.

Now, let’s modify the useEffect hook in src/App.js to fetch the exchange rates:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [exchangeRate, setExchangeRate] = useState(null);
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      try {
        const apiKey = process.env.REACT_APP_API_KEY;
        let url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;
        if (apiKey) {
           url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}?apikey=${apiKey}`;
        }
        const response = await fetch(url);
        const data = await response.json();
        const rate = data.rates[toCurrency];

        if (rate) {
          setExchangeRate(rate);
          setConvertedAmount(amount * rate);
        } else {
          setExchangeRate(null);
          setConvertedAmount(null);
        }
      } catch (error) {
        console.error('Error fetching exchange rate:', error);
        setExchangeRate(null);
        setConvertedAmount(null);
      }
    };

    fetchExchangeRate();
  }, [fromCurrency, toCurrency, amount]);

  useEffect(() => {
    const fetchCurrencies = async () => {
      try {
        const response = await fetch('https://api.exchangerate-api.com/v4/currencies');
        const data = await response.json();
        const currencyCodes = Object.keys(data).sort();
        setCurrencies(currencyCodes);
      } catch (error) {
        console.error('Error fetching currencies:', error);
      }
    };

    fetchCurrencies();
  }, []);

  const handleAmountChange = (e) => {
    setAmount(e.target.value);
    if (exchangeRate) {
      setConvertedAmount(e.target.value * exchangeRate);
    }
  };

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

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

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

export default App;

Here’s what’s changed:

  • fetchExchangeRate Function: This asynchronous function fetches the exchange rate from the API.
  • API Call: We use the fetch API to make a request to the ExchangeRate-API endpoint. We construct the URL dynamically using the fromCurrency and toCurrency states. If you have an API key, we include it in the URL.
  • Error Handling: We use a try...catch block to handle potential errors during the API call. If an error occurs, we log it to the console and reset the exchangeRate and convertedAmount states.
  • Updating State: If the API call is successful, we extract the exchange rate from the response data and update the exchangeRate and convertedAmount states.
  • Dependency Array: The useEffect hook’s dependency array includes fromCurrency, toCurrency, and amount. This ensures that the exchange rate is fetched whenever any of these values change.
  • Fetching Currencies: We added a second useEffect hook to fetch the list of available currencies from the API. This list is then used to populate the select options.
  • Updating the handleAmountChange function: We updated the function to calculate the converted amount after the amount is changed.
  • Currencies State: We added the currencies state to store the list of available currencies.
  • Populating Select Options: We updated the select elements to dynamically populate the options from the currencies state.

Make sure to run npm install in your terminal if you haven’t already to install the necessary dependencies for your project.

Handling User Input and Displaying the Result

We’ve already implemented the handleAmountChange, handleFromCurrencyChange, and handleToCurrencyChange functions to update the state when the user interacts with the input and select elements. The useEffect hook automatically fetches the exchange rate whenever the currency selections change. Now the only thing left to do is to display the converted amount in the result div.

In the JSX, we conditionally render the result using a ternary operator:

<div className="result">
  {convertedAmount !== null && (
    <p>{amount} {fromCurrency} = {convertedAmount.toFixed(2)} {toCurrency}</p>
  )}
</div>

This code checks if convertedAmount is not null. If it’s not null (meaning the exchange rate has been successfully fetched), it displays the converted amount, formatted to two decimal places using toFixed(2).

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • API Key Issues:
    • Incorrect API Key: Double-check that you’ve entered the API key correctly in your .env file (if you’re using one) or directly in the code.
    • API Key Not Being Read: Make sure you’ve installed the dotenv package (npm install dotenv) and imported it at the top of your App.js file if you’re using a .env file.
    • Rate Limits: Some free APIs have rate limits. If you’re exceeding the limit, you might get an error. Consider using a paid plan or implementing a caching mechanism.
  • CORS Errors:
    • Problem: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the API request because the API server and your React app are on different domains.
    • Solution: You might need to configure CORS on the API server or use a proxy server to forward your requests. For local development, you can sometimes bypass CORS issues by using a browser extension that allows cross-origin requests.
  • Incorrect Currency Codes:
    • Problem: Make sure you’re using the correct currency codes (e.g., USD, EUR, GBP).
    • Solution: Double-check the API documentation for the correct codes. You can also implement a currency code validation mechanism in your app.
  • State Not Updating:
    • Problem: If the UI doesn’t update when you change the input or select elements, check your event handlers and state updates.
    • Solution: Ensure you’re correctly using the useState hook to update the state and that your event handlers are correctly calling the state update functions. Also, verify that your dependency array in the useEffect hook is correct.
  • API Request Errors:
    • Problem: If you’re not getting any data from the API, check the browser’s developer console for error messages.
    • Solution: Make sure you’re using the correct API endpoint and parameters. Also, check the API documentation for any usage limitations or required headers.

Key Takeaways and Best Practices

  • State Management: React’s useState hook is crucial for managing the application’s state (amount, currencies, exchange rate, converted amount).
  • API Integration: Using the useEffect hook to fetch data from an external API is a common pattern for interacting with external services.
  • Component Composition: We built a single component (App), but you can break down the application further into smaller, reusable components for better organization (e.g., a CurrencyInput component, a CurrencySelect component).
  • Error Handling: Always include error handling (try...catch blocks) when making API calls to gracefully handle potential issues.
  • User Experience: Provide clear feedback to the user (e.g., loading indicators while fetching data, error messages if something goes wrong).
  • Code Readability: Write clean, well-commented code for maintainability and collaboration.

Enhancements and Next Steps

Here are some ideas to enhance your currency converter:

  • Add More Currencies: Expand the list of available currencies by fetching a comprehensive list from the API.
  • Implement Currency Symbols: Display currency symbols alongside the amounts (e.g., $100 USD).
  • Add a “Swap” Button: Allow users to easily swap the “From” and “To” currencies.
  • Implement a History Feature: Store the conversion history and display it to the user.
  • Add a Loading Indicator: Display a loading indicator while the exchange rates are being fetched.
  • Improve Error Handling: Provide more user-friendly error messages.
  • Add Input Validation: Prevent users from entering invalid input (e.g., negative amounts).
  • Optimize API Calls: Implement caching to reduce the number of API calls and improve performance. Consider using a library like axios for easier API requests.

FAQ

Here are some frequently asked questions about building a currency converter:

  1. Where can I find a free currency exchange rate API?

    There are many free APIs available. We used ExchangeRate-API in this tutorial. Other options include Open Exchange Rates and CurrencyAPI.

  2. How often are the exchange rates updated?

    The update frequency depends on the API you’re using. Most APIs provide real-time or near real-time exchange rates.

  3. Can I use this currency converter for commercial purposes?

    The terms of use for the API you choose will determine whether you can use the currency converter for commercial purposes. Always review the API’s terms of service.

  4. How can I handle API rate limits?

    If the API has rate limits, you can implement caching, use a paid plan, or optimize your code to reduce the number of API calls.

Building a currency converter in React is a rewarding project that combines practical utility with the opportunity to learn and practice essential React concepts. By following this guide, you’ve taken the first step in creating a functional and informative application. You can expand upon this foundation by adding more features and refining the user experience, transforming it into a more robust and personalized tool. The journey of building a project like this doesn’t just end with a functional application; it’s a launchpad for further exploration and deeper understanding of the React ecosystem, empowering you to tackle more complex challenges and create more sophisticated web applications.

More posts