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

--

--

--

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything you need to know about setState()

StarryNift Game Tool User Guide

ECMAScript 2018 (ES2018 or ES9) New Features -JavaScript

Foundations of Web Development Series, Part II: Creating Your Website

Tutorial: Visual testing in 5 minutes with PercyScript

Powerful modal (popup) controller for React

Little-Known Facts About HTML and CSS (Part 1)

5 Tips To Learn Frontend Effectively

Lit sign with the number 5

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Edison Devadoss

Edison Devadoss

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller

More from Medium

Create Dynamic Form Fields in React

Add Husky + Lint-staged to React (with Typescript)

Run NodeJS and ReactJS Concurrently

Using FETCH asynchronously in REACT