⚠️AdBlock Detected

It looks like you're using an ad-blocker!

😭Our team work realy hard to produce quality content on this website and we noticed you have ad-blocking enabled.

ziontutorial.com 👽

Tech That Matters

How To React Js

How to Build a Dynamic Currency Converter Using React

In this article, we will discuss how to make a dynamic currency converter using React JS. Have you ever used Google Currency converter same converter we are going to build in this article? we will be using currency exchange API to convert the currency.

How to Build a Dynamic Currency Converter Using React

Fetching exchange rates

To start, we’ll set up an API to get the latest currency exchange rates. Then, we’ll set up a React app that will fetch data from the API and store it.

What is a currency converter?

According to investopedia.com it is an application that is used to easily convert currency value based on current days. By using the same concept we are going to Build a dynamic currency converter using React which will provide you with the dynamic converted values.

Let’s Begin building a currency converter using the react

Open the command prompt, go to a comfortable spot, and enter the command as follows to build the example project for this example:

Steps to create the application:

Step 1: Set up the React project using the below command in VSCode.
npx create-react-app currency_converter
Step 2: Navigate to the newly created project folder by executing the below command.

Now, as indicated below, head to the project folder and open the folder in your fav editor. and jump to the main folder by typing

cd currency_converter

Now just replace the placeholder content of App.js with the given below content :

See also  How To Create A Modern Website Using React Js Step-By-Step Website Tutorial

Project Structure

Write all the codes with the respective files so that you can achieve the required User interface and logical integration for the currency conversion.

  • Index.html: This is an automatically created file in the public folder if you want to edit the title any favicon icon and any cdn if you want to put you can put them in the index.html file.
  • App.js: App.js file code is the main logic of the currency converter application, where the hook (useState) is used to manage the state. We are implementing exchange rate-API also to get the currency values object for converting the amount value to the respective from and to values. You are going to use usestate fetch API if else and API integration in the app.js file.
  • App.css: This is the styling file, which makes the application more attractive, we have provided some styling attributes like coloring the text, buttons, etc. Overall, all the styling is been managed through this file.


Let’s Move into the app.js file where we write all the logic that is related to the react js currency converter app.

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

const App = () => {
  const [exchangeRates, setExchangeRates] = useState({});
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('INR');
  const [convertedAmount, setConvertedAmount] = useState(null);

  useEffect(() => {
    // Fetch exchange rates from a free API (replace with your preferred API)
    const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;
      .then(response => {
      .catch(error => {
        console.error('Error fetching exchange rates:', error);
  }, [fromCurrency]);

  useEffect(() => {
    // Convert currency when 'amount', 'fromCurrency', or 'toCurrency' changes
    const conversionRate = exchangeRates[toCurrency];
    if (conversionRate) {
      const converted = amount * conversionRate;
  }, [amount, fromCurrency, toCurrency, exchangeRates]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    switch (name) {
      case 'amount':
      case 'fromCurrency':
      case 'toCurrency':

  return (
    <div className='card' >
      <h1 className='text-6xl'>Currency Converter</h1>

      <div className='currency_exchnage'>

      <div className="input_container" >
        <label className="input_label">Amount:</label>
      <div className="input_container">
        <label className="input_label">From Currency:</label>
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>
      <div className="input_container">
        <label className="input_label">To Currency:</label>
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>


      <div className='output'>
        <h2>Converted Amount: {convertedAmount}</h2>

export default App;


Now lets write all the CSS style through which

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F0F2F5;
  font-family: "Inter", sans-serif;

    background-color: #ffffff;
    width: 55%;
    min-width: 550px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;

  /* padding: 16px; */
  background: #fff;
  font-size: 30px !important;
  margin-bottom: 2rem;
  font-weight: 700;
  color: #333;

  display: flex;
  justify-content: space-between;
  background: #fff;
  /* align-items: center; */

.input_container {
  width: 30%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;

.input_label {
  font-size: 0.95rem;
  color: #8B8E98;
  font-weight: 600;
  background: #fff;

.input_field {
  width: auto;
  height: 60px;
  background: #fff;
  padding: 0 0 0 40px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);

.input_field:focus {
  border: 1px solid transparent;
  background: #fff;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;

  background: #ffffff;

  width: 50%;
  margin-top: 20px;
  background-color: #E8F8FD;
  padding: 26px;
  border-radius: 10px;

Steps to run the application:

1. Type the following command in the terminal from your VS Code IDE.

npm start


See also  How to make a skateboard illustration


That’s it congratulation you did it

I hope you enjoyed this little project We used use state Hooks to manage the state of the application how to use API and how to integrate currency converter API to get the updated value according to the amount. within How to Build a Dynamic Currency Converter Using React tutorial all the beginning concepts.

For more tutorials like this, you will follow our YouTube channel and subscribe to our Instagram handler. I hope you like the video that I have uploaded on YouTube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading: