Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Applying currency change from currency dropdown menu to the rest of my budgeting app

I am working on a JS project for an online course where I am creating a budgeting app

I have the following components as part of my app

  1. Budget
  2. Remaining
  3. Spent so far
  4. Allocated Budget
  5. Change Allocation

I was tasked with creating a 6th component for the app "CurrencyDropdown" to house the different currency options to choose from. I have done this.

// CurrencyDropdown.js


import React, { useState } from 'react';
 
const CurrencyDropdown = () => {
const [selectedCurrency, setSelectedCurrency] = useState('$'); // Default currency

const handleCurrencyChange = (event) => {
setSelectedCurrency(event.target.value);
};
return (
<div className='alert alert-primary'>
<label htmlFor="currency">Currency:</label>
<select id="currency" value={selectedCurrency} onChange={handleCurrencyChange}>
<option value="$">$ Dollar</option>
<option value="£">£ Pound</option>
<option value="€">€ Euro</option>
<option value="₹">₹ Rupee</option> 
{/* Add more currency options as needed */}
</select>
</div>
);
};
export default CurrencyDropdown;

The next task is to add code to the project so that when you change the currency from the CurrencyDropdown, the currency displayed on all the other components across the app change to match the selected currency. That is where I got stuck.

I tried to create a new JS component CurrencyContext:

// CurrencyContext.js

import React, { createContext, useContext, useState } from 'react';

const CurrencyContext = createContext();

export const CurrencyProvider = ({ children }) => {
const [selectedCurrency, setSelectedCurrency] = useState('USD');

const changeCurrency = (currency) => {
setSelectedCurrency(currency);
};

return (
<CurrencyContext.Provider value={{ selectedCurrency, changeCurrency }}>
      {children}
</CurrencyContext.Provider>
);
};

export const useCurrency = () => {
return useContext(CurrencyContext);
};

I do not know how or where to apply this component to effect the change to the rest of my app.

Tags:

2

Answers


  1. 0

    To use the CurrencyProvider and useCurrency the rest of the app, you need to wrap your entire application or the relevant part of it with the CurrencyProvider. This will make the selectedCurrency and changeCurrency available to all components nested within it.

    //index.js

ReactDOM.render(
  <React.StrictMode>
    <CurrencyProvider>
      <App />
    </CurrencyProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

    Like this wrap the entire app with the currencyProvider and this will effect the change throughout the app.

    Login or Signup to reply.
  2. 0

    To use your CurrencyContext.js, wrap your application with <CurrencyProvider/>

    Example

    <CurrencyProvider>
  <CurrencyDropdown />
  <Remaining />
</CurrencyProvider>

    This will allow other components to use your currency context. Note that all components that uses the CurrencyContext should be children of CurrencyProvider

    You may now use selectedCurrency and changeCurrency in CurrencyDropdown.js

    // CurrencyDropdown.js

import React, { useState } from "react";
import { useCurrency } from "./CurrencyProvider";

const CurrencyDropdown = () => {
  const { selectedCurrency, changeCurrency } = useCurrency();

  const handleCurrencyChange = (event) => {
    changeCurrency(event.target.value);
  };
  return (
    <div className="alert alert-primary">
      <label htmlFor="currency">Currency:</label>
      <select
        id="currency"
        value={selectedCurrency}
        onChange={handleCurrencyChange}
      >
        <option value="$">$ Dollar</option>
        <option value="£">£ Pound</option>
        <option value="€">€ Euro</option>
        <option value="₹">₹ Rupee</option>
        {/* Add more currency options as needed */}
      </select>
    </div>
  );
};
export default CurrencyDropdown;

    And in other components such as Remaining.js, you can now use selectedCurrency

    // Remaining.js

import React from "react";
import { useCurrency } from "./CurrencyProvider";

const Remaining = () => {
  const currencyRemaining = 100;
  const { selectedCurrency } = useCurrency();
  return (
    <div>
      Remaining:
      {selectedCurrency} {currencyRemaining}
    </div>
  );
};

export default Remaining;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search