Build a Dynamic React Component: Interactive Simple Conversion App

Written by

javascriptfundamentals

in

In today’s digital world, we’re constantly bombarded with numbers – currency values, measurements, and more. While we often rely on online tools for conversions, understanding how to build your own can be incredibly empowering. Imagine creating a simple, yet functional, conversion application right within your web browser. This tutorial will guide you through building an interactive conversion app using React JS, a popular JavaScript library for building user interfaces. We’ll focus on clarity, step-by-step instructions, and real-world examples to make the learning process as smooth as possible.

Why Build a Conversion App in React?

React offers several advantages for this project:

  • Component-Based Architecture: React allows us to break down our application into reusable components, making the code organized and manageable.
  • Virtual DOM: React’s virtual DOM efficiently updates the user interface, leading to a smooth and responsive user experience.
  • JSX: JSX, React’s syntax extension to JavaScript, makes it easier to write and understand the structure of the UI.
  • Component Reusability: Components can be designed to be reused, saving time and effort.

By building this application, you’ll gain practical experience with React’s core concepts like state management, event handling, and rendering. This knowledge will be invaluable as you tackle more complex projects down the line.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running our React application. Download and install them from the official Node.js website (nodejs.org).
  • A Code Editor: Choose your favorite code editor, such as Visual Studio Code, Sublime Text, or Atom.
  • A Web Browser: Chrome, Firefox, or any modern browser will work.

Once you have these installed, open your terminal or command prompt and create a new React app using Create React App:

npx create-react-app conversion-app
cd conversion-app

This command creates a new directory named “conversion-app” with all the necessary files and dependencies for a React project. Then, navigate into the project directory. Now, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000.

Project Structure and Core Components

Our conversion app will have a simple structure, consisting of the following components:

  • App.js: The main component that renders the overall application structure.
  • ConversionForm.js: A component that handles user input and performs the conversion calculations.
  • ConversionResult.js: A component that displays the converted result.

Let’s start by modifying the `App.js` file. Open `src/App.js` and replace its contents with the following code:


import React from 'react';
import ConversionForm from './ConversionForm';
import ConversionResult from './ConversionResult';
import './App.css'; // Import your stylesheet

function App() {
  return (
    <div>
      <h1>Simple Conversion App</h1>
      
      
    </div>
  );
}

export default App;

This sets up the basic structure of our app, including the main heading and placeholders for the `ConversionForm` and `ConversionResult` components. We’ve also imported a CSS file (`App.css`) for styling, which we’ll address later.

Next, create two new files inside the `src` directory: `ConversionForm.js` and `ConversionResult.js`.

Building the Conversion Form (ConversionForm.js)

The `ConversionForm` component will handle user input for the conversion. It will include input fields for the value to convert, the source unit, and the target unit. Here’s the code for `ConversionForm.js`:


import React, { useState } from 'react';

function ConversionForm() {
  const [inputValue, setInputValue] = useState('');
  const [fromUnit, setFromUnit] = useState('USD');
  const [toUnit, setToUnit] = useState('EUR');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleFromUnitChange = (event) => {
    setFromUnit(event.target.value);
  };

  const handleToUnitChange = (event) => {
    setToUnit(event.target.value);
  };

  return (
    <div>
      <label>Value:</label>
      

      <label>From:</label>
      
        USD
        EUR
        GBP
        {/* Add more options as needed */}
      

      <label>To:</label>
      
        EUR
        USD
        GBP
        {/* Add more options as needed */}
      

      <button> {
          // Implement the conversion logic here
        }}>Convert</button>
    </div>
  );
}

export default ConversionForm;

Let’s break down this code:

  • Importing useState: We import the `useState` hook from React to manage the component’s state.
  • State Variables: We define three state variables: `inputValue`, `fromUnit`, and `toUnit`. These store the value entered by the user, the source unit, and the target unit, respectively.
  • Event Handlers: We create event handlers (`handleInputChange`, `handleFromUnitChange`, and `handleToUnitChange`) to update the state variables when the user interacts with the input fields and select dropdowns.
  • JSX Structure: We use JSX to create the form elements (input field, select dropdowns, and a button). Each element is bound to the corresponding state variable using the `value` prop and the `onChange` event handler.

Displaying the Conversion Result (ConversionResult.js)

The `ConversionResult` component will display the calculated result. For now, it will simply display a placeholder. Here’s the code for `ConversionResult.js`:


import React from 'react';

function ConversionResult() {
  return (
    <div>
      <p>Result: </p>
    </div>
  );
}

export default ConversionResult;

This component is relatively simple. It currently displays a “Result:” placeholder. We’ll modify it later to show the actual converted value.

Implementing the Conversion Logic

Now, let’s add the conversion logic. We need to:

  1. Get the user input (value, from unit, and to unit).
  2. Perform the conversion calculation.
  3. Display the result.

First, we’ll need to fetch real-time exchange rates. For simplicity, we’ll use a free API for this tutorial. There are several free APIs available; for example, you can use the ExchangeRate-API (exchangerate-api.com). You’ll need to sign up for a free API key.

Modify `ConversionForm.js` to include the API key and the conversion logic:


import React, { useState } from 'react';
import ConversionResult from './ConversionResult';

function ConversionForm() {
  const [inputValue, setInputValue] = useState('');
  const [fromUnit, setFromUnit] = useState('USD');
  const [toUnit, setToUnit] = useState('EUR');
  const [conversionResult, setConversionResult] = useState(null);
  const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleFromUnitChange = (event) => {
    setFromUnit(event.target.value);
  };

  const handleToUnitChange = (event) => {
    setToUnit(event.target.value);
  };

  const handleConvert = async () => {
    if (!inputValue || isNaN(Number(inputValue))) {
      alert('Please enter a valid number.');
      return;
    }

    try {
      const response = await fetch(
        `https://v6.exchangerate-api.com/v6/${API_KEY}/latest/${fromUnit}`
      );
      const data = await response.json();
      const exchangeRate = data.conversion_rates[toUnit];
      const result = parseFloat(inputValue) * exchangeRate;
      setConversionResult(result.toFixed(2));
    } catch (error) {
      console.error('Error fetching exchange rates:', error);
      alert('Failed to fetch exchange rates. Please check your API key and internet connection.');
    }
  };

  return (
    <div>
      <label>Value:</label>
      

      <label>From:</label>
      
        USD
        EUR
        GBP
        {/* Add more options as needed */}
      

      <label>To:</label>
      
        EUR
        USD
        GBP
        {/* Add more options as needed */}
      

      <button>Convert</button>
      
    </div>
  );
}

export default ConversionForm;

Key changes:

  • API Key: Added a placeholder for your API key. Remember to replace `YOUR_API_KEY` with your actual key.
  • `conversionResult` State: Added a new state variable, `conversionResult`, to store the result of the conversion.
  • `handleConvert` Function: This function is triggered when the user clicks the “Convert” button. It performs the following steps:
    • Validates the input value to ensure it’s a valid number.
    • Uses the `fetch` API to get the exchange rate from the API.
    • Calculates the converted value.
    • Updates the `conversionResult` state.
    • Includes error handling to gracefully handle API errors.
  • Passing `conversionResult` to `ConversionResult` Component: The `conversionResult` is passed as a prop to the `ConversionResult` component.

Now, let’s update the `ConversionResult.js` to display the converted result:


import React from 'react';

function ConversionResult({ result }) {
  return (
    <div>
      <p>Result: {result !== null ? result : ''}</p>
    </div>
  );
}

export default ConversionResult;

This component now receives the `result` prop and displays the converted value. The conditional rendering (`result !== null ? result : ”`) ensures that the result is only displayed when a conversion has been performed.

Adding Styling (App.css)

To make our app visually appealing, we’ll add some basic styling using CSS. Create a file named `App.css` in the `src` directory and add the following styles:


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

.conversion-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.conversion-form label {
  margin-bottom: 5px;
}

.conversion-form input, select {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.conversion-form button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.conversion-result {
  font-size: 1.2em;
  margin-top: 20px;
}

This CSS provides basic styling for the app, form elements, and result display.

Testing and Debugging

After implementing the conversion logic and styling, it’s crucial to test your application thoroughly. Here are some tips for testing and debugging:

  • Input Validation: Test with various inputs, including valid numbers, zero, negative numbers, and non-numeric characters.
  • Unit Selection: Verify that the correct units are selected and that conversions between all unit pairs work as expected.
  • API Errors: Simulate API errors (e.g., by temporarily disabling your internet connection or using an invalid API key) to ensure your error handling works correctly.
  • Browser Developer Tools: Use your browser’s developer tools (usually accessed by pressing F12) to inspect the console for errors and debug your code. The “Network” tab can help you see the API requests and responses.
  • Console Logging: Use `console.log()` statements to debug your code by displaying the values of variables and the flow of execution.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners often make when building React applications, along with tips on how to fix them:

  • Incorrect State Updates: Make sure you’re updating state correctly using the `set…` functions provided by the `useState` hook. Avoid directly modifying state variables.
  • Incorrect Event Handling: Ensure your event handlers are correctly bound to the `onChange` or `onClick` events.
  • Unnecessary Re-renders: React can re-render components unnecessarily. Optimize your components by using `React.memo` for functional components or `shouldComponentUpdate` for class components.
  • Missing Dependencies in `useEffect`: If you are using the `useEffect` hook, make sure to include all dependencies in the dependency array to avoid unexpected behavior.
  • API Key Security: Never hardcode your API key directly in your client-side code, especially in a production environment. Consider using environment variables or a backend proxy to securely manage your API keys.

Summary / Key Takeaways

In this tutorial, we’ve built a functional conversion app using React. We’ve covered the basics of setting up a React project, creating components, handling user input, managing state, making API calls, and displaying the results. You’ve learned how to break down a complex task into smaller, manageable components, understand how to work with forms in React, and how to fetch and display data from an API. Remember to practice these concepts by experimenting and building other applications. By understanding these core concepts, you’ve laid a strong foundation for building more complex and interactive web applications with React.

FAQ

1. How can I add more currency options to the conversion app?

To add more currency options, you need to update the options in the `select` dropdowns in the `ConversionForm.js` component. You also need to ensure that the API you are using supports those currencies. You may need to modify the API call to handle the new currencies. Add the new currencies to the options in both the “From” and “To” select elements.

2. How can I handle errors if the API is down?

As shown in the code, you can use a `try…catch` block to handle errors from the API. Inside the `catch` block, you can display an error message to the user, log the error to the console, and potentially implement retry mechanisms.

3. How can I improve the user interface (UI) of the app?

You can improve the UI by:

  • Adding more CSS styling to make the app more visually appealing.
  • Using a UI library like Material UI, Ant Design, or Bootstrap to quickly build a professional-looking interface.
  • Adding animations and transitions to enhance the user experience.
  • Making the app responsive so that it looks good on different screen sizes.

4. How can I store the user’s preferred currency settings?

You can use local storage to store the user’s preferred currency settings. When the user selects a currency, save it to local storage. When the app loads, check local storage for the user’s preferred currencies and set the default values accordingly.

5. Can I use this app for other types of conversions, like temperature or length?

Yes, you can adapt this app for other types of conversions. You would need to:

  • Modify the state variables to accommodate the different units.
  • Update the select dropdown options to include the new units.
  • Modify the conversion logic to perform the appropriate calculations.

This tutorial provides a solid foundation for building more complex conversion tools.

Building this conversion application provides a practical understanding of fundamental React concepts. You’ve learned how to create a user interface, handle user input, manage state, and integrate with an external API. This hands-on experience is crucial for solidifying your understanding of React and preparing you for more advanced projects. With each step, you’ve not only built a functional app but also strengthened your ability to break down complex problems into manageable components, a skill that’s essential for any software engineer. The modular nature of React components allows for easy modification and expansion, so feel free to experiment with different units, add new features, and personalize the app to your liking. The journey of learning React, like any programming language, is a continuous process of exploration and refinement. Embrace the challenges, and celebrate the accomplishments along the way. Your ability to create this app is a testament to your growing skills.

More posts