React Currency Converter Application

currency converter using React.js

In this article, I will explain some react concepts and using API for currency converter application.

Create react application

create-react-app currency-converter

If you have any trouble to crate react app follow this link. Once you created application change your directory.

cd currency-converter

In this application, I used OpenRates API to get exchange rates and I used ‘axios’ to handle my API requests.

Ref this ‘axios’ installation guide link. Once you finished your installation of ‘axios’ then move to logic.

Create your component structure.

react folder structure.

By default, your app.js file is set in the root file. Now going to edit the app.js file. We should import converter component in app.js and export converter component.

Your app.js should be like this:

app.js file

Then open your converter.js file

Import what are things we need and create UI

import React from "react";
import axios from "axios";
import converter from "./converter.css";
class Converter extends React.Component {
render() {
    return (
      <div className="Converter">
        <h2>
          <span>Currency</span>Converter
          <span role="img" aria-label="money">
            &#x1f4b5;
          </span>
        </h2>
        <div className="From">
          <input
            name="amount"
            type="text"
            value={this.state.amount}
            onChange={event => this.setState({ amount: event.target.value })}
          />
          <select
            name="from"
            onChange={event => this.selectHandler(event)}
            value={this.state.fromCurrency}
          >
            {this.state.currencies.map(cur => (
              <option key={cur}>{cur}</option>
            ))}
          </select>
          <select
            name="to"
            onChange={event => this.selectHandler(event)}
            value={this.state.toCurrency}
          >
            {this.state.currencies.map(cur => (
              <option key={cur}>{cur}</option>
            ))}
          </select>
          <button onClick={this.convertHandler}>Convert</button>
          {this.state.result && <h3>{this.state.result}</h3>}
        </div>
      </div>
    );
  }
}
export default Converter;

Set style for your UI

Kindly past this code in your converter.css file. Don’t too much time for styles.

.Converter {
  width: 100%;
  padding: 0 15%;
  box-sizing: border-box;
  text-align: center;
}
.Form {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.Form input,
select {
  padding: 5px;
  margin: 5px 10px;
  border-radius: 5px;
  border: 1px solid rgba(119, 119, 119, 0.5);
}
.Form button {
  padding: 5px 10px;
  border-radius: 5px;
  background: rgb(11, 170, 59);
  color: white;
  border: none;
}
.Converter h3 {
  background-color: #ccc;
  border-radius: 10px;
  padding: 15px;
  font-size: 30px;
}
.Converter h2 span {
  color: rgb(11, 170, 59);
}

Define our states.

constructor(props) {
    super(props);
    this.state = {
      result: null,
      fromCurrency: "USD",
      toCurrency: "GBP",
      amount: 1,
      currencies: []
    };
  }

List of currency is initialized in componentDidMount() using OpenRates API.

componentDidMount() {
    axios
      .get("http://api.openrates.io/latest")
      .then(response => {
        const currencyAr = ["EUR"];
        for (const key in response.data.rates) {
          currencyAr.push(key);
        }
        this.setState({ currencies: currencyAr });
      })
      .catch(err => {
        console.log("oppps", err);
      });
  }

We stored all currency in this.state.currencies. Then we show the currency in our dropdown boxes.

Select from and to currency for convert money.

selectHandler = event => {
    if (event.target.name === "from") {
      this.setState({ fromCurrency: event.target.value });
    } else {
      if (event.target.name === "to") {
        this.setState({ toCurrency: event.target.value });
      }
    }
  };

Write a convertHandler function for button click event that is going to convert money using the API call.

convertHandler = () => {
    if (this.state.fromCurrency !== this.state.toCurrency) {
      axios
        .get(
          `http://api.openrates.io/latest?base=${
            this.state.fromCurrency
          }&symbols=${this.state.toCurrency}`
        )
        .then(response => {
          const result =
            this.state.amount * response.data.rates[this.state.toCurrency];
          this.setState({ result: result.toFixed(5) });
        })
        .catch(error => {
          console.log("Opps", error.message);
        });
    } else {
      this.setState({ result: "You cant convert the same currency!" });
    }
  };

Look at the entire code

import React from "react";
import axios from "axios";
import converter from "./converter.css";
class Converter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: null,
      fromCurrency: "USD",
      toCurrency: "GBP",
      amount: 1,
      currencies: []
    };
  }
  componentDidMount() {
    axios
      .get("http://api.openrates.io/latest")
      .then(response => {
        const currencyAr = ["EUR"];
        for (const key in response.data.rates) {
          currencyAr.push(key);
        }
        this.setState({ currencies: currencyAr });
      })
      .catch(err => {
        console.log("oppps", err);
      });
  }
  convertHandler = () => {
    if (this.state.fromCurrency !== this.state.toCurrency) {
      axios
        .get(
          `http://api.openrates.io/latest?base=${
            this.state.fromCurrency
          }&symbols=${this.state.toCurrency}`
        )
        .then(response => {
          const result =
            this.state.amount * response.data.rates[this.state.toCurrency];
          this.setState({ result: result.toFixed(5) });
        })
        .catch(error => {
          console.log("Opps", error.message);
        });
    } else {
      this.setState({ result: "You cant convert the same currency!" });
    }
  };
  selectHandler = event => {
    if (event.target.name === "from") {
      this.setState({ fromCurrency: event.target.value });
    } else {
      if (event.target.name === "to") {
        this.setState({ toCurrency: event.target.value });
      }
    }
  };
  render() {
    return (
      <div className="Converter">
        <h2>
          <span>Currency</span>Converter
          <span role="img" aria-label="money">
            &#x1f4b5;
          </span>
        </h2>
        <div className="From">
          <input
            name="amount"
            type="text"
            value={this.state.amount}
            onChange={event => this.setState({ amount: event.target.value })}
          />
          <select
            name="from"
            onChange={event => this.selectHandler(event)}
            value={this.state.fromCurrency}
          >
            {this.state.currencies.map(cur => (
              <option key={cur}>{cur}</option>
            ))}
          </select>
          <select
            name="to"
            onChange={event => this.selectHandler(event)}
            value={this.state.toCurrency}
          >
            {this.state.currencies.map(cur => (
              <option key={cur}>{cur}</option>
            ))}
          </select>
          <button onClick={this.convertHandler}>Convert</button>
          {this.state.result && <h3>{this.state.result}</h3>}
        </div>
      </div>
    );
  }
}
export default Converter;

Run Application

After finish, everything run your application

npm start

Then the application opens in your browser window. Your application should be like this.

Sometimes if your application does not fetch data using API. It may show an error like this.

The solution for this error, if you are using chrome browser you need to add an add-on in your chrome browser. Kindly install this add-on.

Thank you for reading!

Happy learning……..

Reference links

Getting Started - React

Using Axios with React

Allow-Control-Allow-Origin: *