Core React Concepts For Your Currency Converter App

This module explains the core React concepts that make your Currency Converter App work. You’ll learn how the app is broken down into components, how state stores user input, how events trigger conversions, how data is fetched with useEffect, and how the UI is styled using Tailwind.

By the end of this module, you’ll understand why the app behaves the way it does and how React handles everything under the hood.

React apps are built from components—JavaScript functions that return UI using JSX (HTML-like syntax). Components let us split the app into smaller, reusable parts.

Your Currency Converter App uses these main components:

1. App.jsx
   • The root component of the app.
   • Renders the CurrencyConverter component inside a container.
   • Keeps the structure clean and separates logic from layout.
2. CurrencyConverter.jsx
   • The main logic of the app lives here.
   • Handles:
     • Selecting “From” and “To” currencies
     • Entering an amount
     • Fetching exchange rates from the API
     • Displaying the converted amount
   • This is where most of the state and events are managed.
3. CurrencyDropdown.jsx (optional)
   • A reusable dropdown component for selecting currencies.
   • Helps avoid duplicating code for the "From" and "To" currency selectors.

This component-based structure keeps your app organized and easy to maintain.

React’s useState() hook lets us store dynamic values—anything that changes while the app runs.

In the Currency Converter App, we use states like:

const [amount, setAmount] = useState(1);

const [fromCurrency, setFromCurrency] = useState("USD");

const [toCurrency, setToCurrency] = useState("INR");

const [result, setResult] = useState(null);

const [rates, setRates] = useState({});

Here’s what each one does:

• amount → stores the number the user enters.
• fromCurrency → base currency (e.g., USD).
• toCurrency → target currency (e.g., INR).
• result → the converted value displayed on screen.
• rates → stores all exchange rates fetched from the API.

Whenever a state changes, React automatically re-renders the UI, so the user sees updated results instantly.

Fetching data from an API is considered a side effect in React. To handle this, we use the useEffect() hook.

In our app, we fetch exchange rates when the selected currency changes:

useEffect(() => {

fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)

.then(res => res.json())

.then(data => setRates(data.rates));

}, [fromCurrency]);

• The fetch() call retrieves the latest exchange rates for the chosen base currency.
• setRates(data.rates) saves them in state.
• The [fromCurrency] dependency ensures this runs only when the base currency changes.

This means users always get the latest rates, without unnecessary API calls.

User interactions—like typing an amount or selecting currencies—are handled with event functions.

Examples from our app:

const handleAmountChange = (e) => {

setAmount(e.target.value);

};

const handleFromCurrencyChange = (e) => {

setFromCurrency(e.target.value);

};

const handleToCurrencyChange = (e) => {

setToCurrency(e.target.value);

};

const convertCurrency = () => {

if (rates[toCurrency]) {

setResult((amount * rates[toCurrency]).toFixed(2));

}

};

• handleAmountChange updates the amount as the user types.
• handleFromCurrencyChange and handleToCurrencyChange update dropdown selections.
• convertCurrency performs the calculation using the latest rate.

These event handlers make the app interactive and responsive.