Build a Dynamic React Component for a Simple Interactive Currency Converter

Written by

javascriptfundamentals

in

In today’s interconnected world, dealing with different currencies is a common occurrence. Whether you’re traveling, shopping online, or managing international finances, the need to convert currencies quickly and accurately is essential. Imagine the inconvenience of constantly visiting external websites or using separate apps just to perform this simple task. Wouldn’t it be far more convenient to have a currency converter readily available within your own applications?

The Problem: Manual Currency Conversion is Tedious

The core problem lies in the manual process of converting currencies. It’s time-consuming, prone to errors, and reliant on external resources. Without an integrated solution, users are forced to interrupt their workflow, switch between applications, and manually input exchange rates. This not only diminishes the user experience but also increases the likelihood of mistakes, especially when dealing with multiple conversions or fluctuating exchange rates.

Why React? The Ideal Solution

React is a perfect choice for building an interactive currency converter for several reasons:

  • Component-Based Architecture: React allows you to build reusable components, making the currency converter modular and easy to integrate into other projects.
  • Virtual DOM: React’s virtual DOM efficiently updates the user interface, ensuring a smooth and responsive user experience, even with frequent currency rate updates.
  • State Management: React’s state management capabilities make it easy to handle user input, currency rates, and conversion results.
  • Large Community and Ecosystem: React boasts a vast community and a wealth of libraries and resources, simplifying development and troubleshooting.

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 technologies is crucial for understanding the code and styling the component.
  • A code editor: Choose your favorite editor, such as VS Code, Sublime Text, or Atom.

Step-by-Step Guide: Building the Currency Converter

1. Setting Up the React 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 directory named “currency-converter” and sets up a basic React application. Navigate into the project directory.

2. Installing Dependencies

We’ll need a library to fetch real-time exchange rates. We’ll use the `axios` library for making API requests. Install it using:

npm install axios

3. Creating the Currency Converter Component

Create a new file named `CurrencyConverter.js` inside the `src` directory. This will be our main component.

Here’s the basic structure:

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

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

  useEffect(() => {
    // Fetch currency data and set exchange rates
  }, []);

  const handleAmountChange = (e) => {
    // Handle amount changes
  };

  const handleFromCurrencyChange = (e) => {
    // Handle from currency changes
  };

  const handleToCurrencyChange = (e) => {
    // Handle to currency changes
  };

  return (
    <div>
      <h2>Currency Converter</h2>
      <!-- Input fields and dropdowns -->
    </div>
  );
}

export default CurrencyConverter;

Let’s break down this code:

  • Import Statements: We import `useState` and `useEffect` from React and `axios` for making API requests.
  • State Variables: We initialize several state variables using the `useState` hook to manage the component’s data:
    • `currencies`: An array to store the available currencies.
    • `fromCurrency`: The selected currency to convert from.
    • `toCurrency`: The selected currency to convert to.
    • `amount`: The amount to convert.
    • `exchangeRate`: The current exchange rate between the two selected currencies.
    • `convertedAmount`: The converted amount.
  • useEffect Hook: This hook will be used to fetch the currency data and update exchange rates when the component mounts or when dependencies change.
  • Event Handlers: We define event handlers to update the state when the user interacts with the input fields and dropdowns.
  • JSX Structure: We define the basic structure of the component, including a heading and placeholders for the input fields and dropdowns.

4. Fetching Currency Data

Inside the `useEffect` hook, we’ll fetch a list of available currencies and their exchange rates. We’ll use a free API for this tutorial (you can find many free APIs online). Replace the placeholder comments inside the `useEffect` with the following code:

  useEffect(() => {
    const fetchCurrencies = async () => {
      try {
        const response = await axios.get('https://api.exchangerate-api.com/v4/latest/USD'); // Replace with your API endpoint
        const rates = response.data.rates;
        const currencyList = Object.keys(rates);
        setCurrencies(currencyList);
        // Set initial exchange rate
        setExchangeRate(rates[toCurrency]);
      } catch (error) {
        console.error('Error fetching currencies:', error);
      }
    };
    fetchCurrencies();
  }, [toCurrency]); // Add toCurrency as a dependency

Explanation:

  • `fetchCurrencies` Function: This asynchronous function fetches currency data from the API. Make sure to replace the placeholder API endpoint with a valid API that provides currency exchange rates.
  • `axios.get()`: This makes a GET request to the API endpoint.
  • `response.data.rates` : This assumes that the API returns an object where keys are currency codes and values are exchange rates relative to USD. Adjust this based on your API’s response structure.
  • `Object.keys(rates)`: Extracts the currency codes (e.g., “USD”, “EUR”, “JPY”) from the rates object and creates an array of currencies.
  • `setCurrencies(currencyList)`: Updates the `currencies` state with the fetched currency codes.
  • Error Handling: Includes a `try…catch` block to handle potential errors during the API request.
  • Dependency Array: The `useEffect` hook has a dependency array `[toCurrency]`. This means the effect will re-run whenever `toCurrency` changes, ensuring the exchange rate is updated when the user selects a different target currency.

5. Implementing Event Handlers

Now, let’s implement the event handlers to update the component’s state when the user interacts with the input fields and dropdowns. Add the following code inside the `CurrencyConverter` component:


  const handleAmountChange = (e) => {
    setAmount(e.target.value);
    convertCurrency(e.target.value, fromCurrency, toCurrency, rates);
  };

  const handleFromCurrencyChange = (e) => {
    setFromCurrency(e.target.value);
    convertCurrency(amount, e.target.value, toCurrency, rates);
  };

  const handleToCurrencyChange = (e) => {
    setToCurrency(e.target.value);
    convertCurrency(amount, fromCurrency, e.target.value, rates);
  };

  const convertCurrency = async (amount, fromCurrency, toCurrency, rates) => {
    try {
      const fromRate = rates[fromCurrency];
      const toRate = rates[toCurrency];
      if (!fromRate || !toRate) {
        setConvertedAmount('Invalid currency');
        return;
      }
      const converted = (amount / fromRate) * toRate;
      setConvertedAmount(converted.toFixed(2));
    } catch (error) {
      console.error('Conversion error:', error);
      setConvertedAmount('Error during conversion');
    }
  };

Explanation:

  • `handleAmountChange` Function: Updates the `amount` state with the value entered in the input field. Also triggers currency conversion.
  • `handleFromCurrencyChange` Function: Updates the `fromCurrency` state with the selected currency. Also triggers currency conversion.
  • `handleToCurrencyChange` Function: Updates the `toCurrency` state with the selected currency. Also triggers currency conversion.
  • `convertCurrency` Function: This function is responsible for performing the currency conversion.
    • It takes the amount, from currency, to currency, and rates as arguments.
    • It fetches the exchange rates for both currencies from the `rates` object (obtained from the API).
    • It checks if both exchange rates are valid.
    • It performs the conversion: `(amount / fromRate) * toRate`.
    • It formats the result to two decimal places using `toFixed(2)`.
    • It updates the `convertedAmount` state with the result.
    • Includes error handling for invalid currencies or conversion errors.

6. Rendering the UI

Now, let’s create the UI to display the input fields, dropdowns, and the converted amount. Replace the placeholder comment in the `return` statement with the following code:


    <div className="currency-converter">
      <h2>Currency Converter</h2>
      <div className="input-group">
        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          value={amount}
          onChange={handleAmountChange}
        />
      </div>
      <div className="select-group">
        <label htmlFor="fromCurrency">From:</label>
        <select
          id="fromCurrency"
          value={fromCurrency}
          onChange={handleFromCurrencyChange}
        >
          {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={handleToCurrencyChange}
        >
          {currencies.map((currency) => (
            <option key={currency} value={currency}>{currency}</option>
          ))}
        </select>
      </div>
      <div className="result">
        <p>Converted Amount: {convertedAmount ? convertedAmount : '0.00'}</p>
      </div>
    </div>

Explanation:

  • Container Div: Wraps the entire component for styling.
  • Heading: Displays the title “Currency Converter.”
  • Amount Input:
    • A number input field for the user to enter the amount to convert.
    • `value`: Binds the input’s value to the `amount` state.
    • `onChange`: Calls the `handleAmountChange` function when the input value changes.
  • From Currency Select:
    • A select dropdown for the user to choose the currency to convert from.
    • `value`: Binds the select’s value to the `fromCurrency` state.
    • `onChange`: Calls the `handleFromCurrencyChange` function when the selected option changes.
    • Uses the `currencies` array (populated from the API) to dynamically generate the options.
  • To Currency Select:
    • A select dropdown for the user to choose the currency to convert to.
    • `value`: Binds the select’s value to the `toCurrency` state.
    • `onChange`: Calls the `handleToCurrencyChange` function when the selected option changes.
    • Uses the `currencies` array to dynamically generate the options.
  • Result Display:
    • Displays the converted amount.
    • Uses a conditional rendering to display “0.00” if the `convertedAmount` is null (initial state or no conversion yet).

7. Integrating the Component into your App

To use the `CurrencyConverter` component, import it into your `App.js` file (or the main component of your application) and render it. Replace the existing content of `src/App.js` with the following:


import React from 'react';
import CurrencyConverter from './CurrencyConverter';
import './App.css'; // Import your CSS file

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

export default App;

Also, create a new file named `App.css` in the `src` folder. This will be used to style the component. Add the following basic styles:


.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

.currency-converter {
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
}

.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: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.result {
  font-size: 1.2em;
  font-weight: bold;
}

8. Running the Application

Save all the files. In your terminal, run the following command to start the development server:

npm start

This will open your application in your web browser (usually at `http://localhost:3000`). You should see the currency converter component, and you should be able to enter an amount, select currencies, and see the converted amount. If you encounter any errors, carefully review the console for clues and double-check your code against the examples provided.

Common Mistakes and How to Fix Them

1. CORS Errors

Problem: You might encounter CORS (Cross-Origin Resource Sharing) errors when fetching data from the API. This happens because your frontend (running on `localhost:3000`) is trying to access a resource from a different domain, and the API server might not be configured to allow this.

Solution:

  • Use a Proxy: One solution is to use a proxy server. You can configure your development server to proxy requests to the API. In your `package.json` file, add a `proxy` field:
{
  "name": "currency-converter",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://api.exchangerate-api.com/", // Replace with the API's base URL
  "dependencies": {
    // ... other dependencies
  }
}

Then, in your `CurrencyConverter.js` file, change the API endpoint to:

const response = await axios.get('/v4/latest/USD');

The `create-react-app` development server will automatically proxy requests to the specified API URL. This approach is only for development; you’ll need a proper backend or a CORS-enabled API for production.

  • Use a CORS-Enabled API: If possible, find an API that has CORS enabled, meaning it allows requests from any origin.

2. Incorrect API Endpoint

Problem: The API endpoint you use might be incorrect, leading to errors when fetching data.

Solution:

  • Double-check the API documentation: Carefully review the API documentation to ensure you’re using the correct endpoint, parameters, and request method (GET, POST, etc.).
  • Test the endpoint: Use tools like Postman or your browser’s developer console to test the API endpoint directly and see what data it returns. This helps isolate the issue.

3. Incorrect Data Parsing

Problem: The API might return data in a format that your code doesn’t expect, leading to errors when you try to access the exchange rates.

Solution:

  • Inspect the API response: Use your browser’s developer tools (Network tab) or `console.log(response.data)` to inspect the data returned by the API.
  • Adjust your code: Modify your code to correctly parse the API response and extract the necessary data (e.g., exchange rates). The example code assumes the exchange rates are in `response.data.rates`. Adapt this to match the API’s actual response structure.

4. Unnecessary Re-renders

Problem: Your component might be re-rendering more often than necessary, which can impact performance, especially if you have a lot of components or complex calculations.

Solution:

  • Use `React.memo` or `useMemo`: For components that don’t need to re-render frequently (e.g., a dropdown that only updates when its options change), use `React.memo` to memoize the component and prevent unnecessary re-renders. For computationally expensive calculations, use `useMemo` to memoize the result.
  • Optimize event handlers: Ensure your event handlers are efficient and don’t trigger unnecessary state updates.
  • Dependency arrays in `useEffect`: Carefully define the dependencies in your `useEffect` hooks to ensure they only run when necessary. Avoid including dependencies that will cause frequent re-renders.

5. Currency Rate Fluctuations

Problem: Currency exchange rates change constantly. Your application might show outdated rates if you don’t refresh the data frequently.

Solution:

  • Implement Refreshing: Implement a mechanism to periodically refresh the exchange rates. You could use `setInterval` or `setTimeout` to fetch the data at regular intervals. Be mindful of API rate limits.
  • Consider User Interaction: Allow the user to manually refresh the rates with a button or other control.

Key Takeaways

  • React’s Component-Based Architecture: Makes building reusable and modular components easy.
  • State Management: `useState` hook to manage the component’s data and UI.
  • API Integration: Used `axios` to fetch real-time exchange rates.
  • Event Handling: Responded to user interactions (input changes, dropdown selections).
  • Error Handling: Incorporated error handling to make the application robust.
  • User Experience: Designed a simple and intuitive user interface.

FAQ

1. Can I use a different API?

Yes, absolutely! The code is designed to be flexible. You can easily replace the API endpoint with any other API that provides currency exchange rates. Just make sure to adjust the data parsing logic to match the API’s response format.

2. How can I add more currencies?

To add more currencies, you’ll need an API that provides exchange rates for those currencies. Update the `currencies` state with the currency codes returned by the API. The dropdowns will automatically display the new currencies.

3. How do I style the component?

You can style the component using CSS. The example code includes basic CSS. You can customize the styles in the `App.css` file or use a CSS-in-JS solution (like styled-components) for more advanced styling options.

4. Can I deploy this application?

Yes, you can deploy the application. You can use platforms like Netlify, Vercel, or GitHub Pages to deploy your React application. Make sure to handle the CORS issue for production environments, either by using a CORS-enabled API or implementing a backend proxy.

5. How can I improve the user experience?

You can improve the user experience by:

  • Adding error handling and displaying user-friendly error messages.
  • Implementing real-time currency rate updates.
  • Adding a loading indicator while fetching data.
  • Providing visual feedback to the user (e.g., highlighting selected currencies).
  • Adding more currencies and customization options.

Building a currency converter in React provides a solid foundation for understanding fundamental React concepts. By mastering state management, API integration, and component composition, you equip yourself with the skills to build a wide range of interactive and dynamic web applications. The flexibility of React, combined with the power of modern APIs, allows you to create user-friendly tools that solve real-world problems. Whether you’re a beginner or an experienced developer, building this currency converter can serve as a valuable learning experience, solidifying your understanding of React and boosting your confidence in tackling more complex projects. As you continue to explore the possibilities, remember that the most rewarding journey is the one of continuous learning and experimentation.

More posts