Build A Dynamic React Component: Interactive Currency Converter

In today’s interconnected world, dealing with multiple currencies is a common occurrence. Whether you’re traveling, managing international business transactions, or simply browsing online stores, the ability to quickly and accurately convert currencies is incredibly useful. This tutorial will guide you through building a dynamic, interactive currency converter using React JS. We’ll cover the essential concepts, from setting up the project to fetching live exchange rates and handling user input. By the end, you’ll have a fully functional currency converter component that you can integrate into your own projects.

Why Build a Currency Converter?

Creating a currency converter is an excellent learning project for several reasons:

Practical Application: It solves a real-world problem, making it immediately useful.
API Integration: It introduces you to the concept of fetching data from external APIs.
State Management: You’ll learn how to manage component state to handle user input and display results.
User Interface (UI) Design: You’ll gain experience in creating a user-friendly interface.
React Fundamentals: It reinforces core React concepts like components, props, and event handling.

Furthermore, understanding how to build such a component can be a stepping stone to more complex applications that require real-time data and user interaction.

Getting Started: Project Setup

Before diving into the code, let’s set up our React project. We’ll use Create React App, which is the easiest way to bootstrap a new React application. Open your terminal and run the following command:

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

This will create a new directory called currency-converter, install all the necessary dependencies, and navigate you into the project directory. Next, let’s clean up the default files to prepare for our component.

In the src directory, delete the following files: App.css, App.test.js, index.css, logo.svg, and reportWebVitals.js. Also, remove the import statements for these files in App.js and index.js. Your App.js should now look something like this:

import React from 'react';

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

export default App;

We’ll add our component code here later. For now, let’s install a library to help us with making API calls. We’ll use axios:

npm install axios

Fetching Exchange Rates: API Integration

The core functionality of our currency converter relies on fetching real-time exchange rates. We’ll use a free API for this purpose. There are several free currency APIs available; for this tutorial, we will use the ExchangeRate-API. You will need to sign up for a free API key at https://www.exchangerate-api.com/. Once you have the API key, you can start making requests.

Let’s create a new file named CurrencyConverter.js inside the src directory. This will be our main component. We’ll start by importing React and useState to manage the component’s state, and useEffect to make API calls when the component mounts. We’ll also import axios to make API requests.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CurrencyConverter() {
  // State variables will go here
  return (
    <div>
      <h2>Currency Converter</h2>
      <!-- UI elements will go here -->
    </div>
  );
}

export default CurrencyConverter;

Now, let’s add the state variables. We’ll need to store the following information:

amount: The amount to convert (user input).
fromCurrency: The currency to convert from (user selection).
toCurrency: The currency to convert to (user selection).
convertedAmount: The result of the conversion.
currencies: An array of available currencies (fetched from the API).
isLoading: A boolean to indicate whether we’re fetching data.
error: An error message if something goes wrong.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CurrencyConverter() {
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  return (
    <div>
      <h2>Currency Converter</h2>
      <!-- UI elements will go here -->
    </div>
  );
}

export default CurrencyConverter;

Next, let’s write a function to fetch the currencies and populate the currencies state. We’ll use the useEffect hook to call this function when the component mounts. Replace the comment ‘// State variables will go here’ with the following code:

  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCurrencies = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await axios.get('https://api.exchangerate-api.com/v4/latest/USD'); // Replace USD with your base currency if needed
        const fetchedCurrencies = Object.keys(response.data.rates);
        setCurrencies(fetchedCurrencies);
      } catch (err) {
        setError('Could not fetch currencies. Please try again.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchCurrencies();
  }, []); // Empty dependency array means this runs only once on mount

Here, we define an asynchronous function fetchCurrencies. Inside this function:

We set isLoading to true and clear any existing errors.
We use axios.get to fetch currency data from the API. Important: Replace the URL with the correct API endpoint provided by your chosen currency API and use your API key if required.
If the request is successful, we extract the list of currencies from the response. This example assumes the API returns a structure where the currencies are nested within the `rates` object. You may need to adjust the way you access the currencies based on the API’s response format.
If an error occurs during the API call, we set an error message.
Finally, we set isLoading to false in the finally block, regardless of success or failure.
We call the fetchCurrencies function inside the useEffect hook. The empty dependency array [] ensures that this effect runs only once when the component mounts.

Building the User Interface (UI)

Now, let’s build the UI for our currency converter. We’ll create input fields for the amount and select dropdowns for the currencies. We’ll also display the converted amount and any potential error messages.

Inside the CurrencyConverter component, replace the comment  with the following code:

<div className="container">
  {error && <p className="error">{error}</p>}
  <div className="input-group">
    <label htmlFor="amount">Amount:</label>
    <input
      type="number"
      id="amount"
      value={amount}
      onChange={(e) => setAmount(e.target.value)}
    />
  </div>

  <div className="select-group">
    <label htmlFor="fromCurrency">From:</label>
    <select
      id="fromCurrency"
      value={fromCurrency}
      onChange={(e) => setFromCurrency(e.target.value)}
    >
      {currencies.map((currency) => (
        <option key={currency} value={currency}>{currency}</option>
      ))}
    </select>
  </div>

  <div className="select-group">
    <label htmlFor="toCurrency">To:</label>
    <select
      id="toCurrency"
      value={toCurrency}
      onChange={(e) => setToCurrency(e.target.value)}
    >
      {currencies.map((currency) => (
        <option key={currency} value={currency}>{currency}</option>
      ))}
    </select>
  </div>

  <button onClick={handleConvert} disabled={isLoading}>
    {isLoading ? 'Converting...' : 'Convert'}
  </button>

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

Let’s break down this UI code:

Error Handling: We display an error message if the error state is not null.
Amount Input: An input field for the amount, using the amount state and updating it on change.
Currency Selects: Two select dropdowns, one for the ‘from’ currency and one for the ‘to’ currency. These use the currencies array to populate the options, and update the fromCurrency and toCurrency states on change.
Convert Button: A button that triggers the conversion logic (we’ll implement the handleConvert function shortly). It is disabled while isLoading is true.
Conversion Result: Displays the converted amount if convertedAmount is not null. We use toFixed(2) to format the result to two decimal places.

Now, add the `handleConvert` function to the `CurrencyConverter` component. This function will make the API call to get the conversion rate and update the `convertedAmount` state. Add this function inside the `CurrencyConverter` component, before the return statement:

  const handleConvert = async () => {
    setIsLoading(true);
    setError(null);
    setConvertedAmount(null); // Clear previous result
    try {
      const response = await axios.get(
        `https://api.exchangerate-api.com/v4/latest/${fromCurrency}` // Replace with your API endpoint
      );
      const rate = response.data.rates[toCurrency];
      if (!rate) {
        setError('Could not retrieve exchange rate.');
        return;
      }
      const result = amount * rate;
      setConvertedAmount(result);
    } catch (err) {
      setError('Conversion failed. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

Here’s a breakdown of the handleConvert function:

It sets isLoading to true and clears any existing errors and the previous conversion result.
It constructs the API endpoint using the selected fromCurrency. Important: Replace the placeholder URL with the correct API endpoint and parameters as per your chosen currency API.
It fetches the exchange rate from the API. The response format will depend on the API. This example assumes the API returns a rates object, where the target currency is a key and the value is the exchange rate.
It calculates the converted amount by multiplying the input amount by the exchange rate.
It updates the convertedAmount state with the result.
It handles potential errors (e.g., API failure, missing rate) by setting an error message.
Finally, it sets isLoading to false in the finally block.

Styling the Component

To make our currency converter look presentable, let’s add some basic styling. Create a file named CurrencyConverter.css in the src directory and add the following CSS:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 400px;
  margin: 20px auto;
}

.input-group, .select-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

input[type="number"], select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 10px;
}

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

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error {
  color: red;
  margin-bottom: 10px;
}

Then, import this CSS file into your CurrencyConverter.js file:

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

function CurrencyConverter() {
  // ... (rest of the component code)
}

export default CurrencyConverter;

Integrating the Component into App.js

Finally, let’s integrate our CurrencyConverter component into App.js. Open App.js and replace the existing content with the following:

import React from 'react';
import CurrencyConverter from './CurrencyConverter';
import './App.css'; // Create this file with basic styling

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

export default App;

Also, create an App.css file in the src directory with some basic styling to center the content:

.App {
  text-align: center;
  background-color: #f0f0f0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

Now, run your React application using npm start in your terminal. You should see the currency converter component in your browser.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

API Key Errors: Double-check that you have a valid API key and that you’re using it correctly in your API requests. Many APIs require an API key in the request headers or as a query parameter.
CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking requests to the API. This is usually due to the API not allowing requests from your domain. You might need to use a proxy server or configure CORS settings on the API server. For development, you might be able to use a browser extension to disable CORS, but this is not recommended for production.
Incorrect API Endpoint: Verify that you’re using the correct API endpoint for fetching exchange rates. API documentation is your best friend here.
Incorrect Data Parsing: The API response format varies. Make sure you are correctly parsing the response to extract the exchange rates. Use the browser’s developer tools (Network tab) to inspect the API response and understand its structure.
State Updates: Ensure you are correctly updating the state variables with the set... functions. Incorrect state updates can lead to unexpected behavior.
Typos: Carefully check for typos in your code, especially in variable names and API URLs.

Key Takeaways

In this tutorial, we’ve covered the following key concepts:

Project Setup: Using Create React App to bootstrap a React project.
State Management: Using useState to manage component state for user input, results, and loading indicators.
API Integration: Fetching data from an external API using axios.
Event Handling: Handling user input using the onChange event.
Conditional Rendering: Displaying different content based on the component’s state (e.g., loading indicator, error messages, conversion results).
UI Design: Building a basic UI with input fields, select dropdowns, and a button.
Component Structure: Creating a reusable React component that encapsulates all the currency conversion logic.

This project provides a solid foundation for understanding how to build interactive React components that interact with external APIs. You can expand on this by adding features such as:

Currency Symbols: Displaying currency symbols alongside the amounts.
History: Saving and displaying a history of conversions.
Error Handling: More robust error handling.
User Preferences: Allowing users to set their default currencies.
More Advanced UI: Improving the user interface with better styling and layout.

FAQ

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

Which currency API should I use? There are many free and paid currency APIs available. Research and choose one that meets your needs. Consider factors like rate limits, data accuracy, and documentation. Some popular choices include ExchangeRate-API (used in this tutorial), Open Exchange Rates, and Fixer.io.
How do I handle API rate limits? If your chosen API has rate limits, you may need to implement strategies to avoid exceeding them. This could involve caching data, limiting the number of API calls, or implementing a paid subscription.
How can I improve the user interface? Use CSS frameworks like Bootstrap or Material-UI to create a more visually appealing and responsive UI. Consider using a UI library for more advanced components like date pickers and charts if you plan to add more features.
How do I deploy my currency converter? You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. You’ll typically build your application using npm run build and then deploy the contents of the build directory.
How can I make the currency converter mobile-friendly? Use responsive design techniques (e.g., media queries in your CSS) to ensure that the currency converter looks good on different screen sizes. Consider using a mobile-first approach.

This tutorial provides a functional starting point, but the world of React and API integrations is vast. Continue exploring, experimenting, and building to refine your skills and create more sophisticated applications. The knowledge gained here can be applied to many other projects, from simple calculators to complex financial applications. Keep learning, and keep building!

Build a Dynamic React Component: Interactive Currency Converter

Why Build a Currency Converter?

Getting Started: Project Setup

Fetching Exchange Rates: API Integration

Building the User Interface (UI)

Styling the Component

Integrating the Component into App.js

Common Mistakes and Troubleshooting

Key Takeaways

FAQ

More posts

Why Build a To-Do List App?

Build a Simple Interactive Quiz with HTML: A Beginner’s Guide

Build a Simple To-Do List App with HTML: A Beginner’s Guide

Build a Simple Website with HTML: A Beginner’s Guide