score:0

you can fix this by downloading all the currencies images that you will use, and after that create an object which bind key: symbol; value: 'path-to-image'

please refer to this on how to display icon inside input

and refer to this on how to include images in react

as far as i am looking at this, concrete solution might be like this

// * download all currency flags that you will use and add them to public directory

const mapsymboltoflag = {
    'all': 'path-to-public-directory/all.ico',
    'eur': 'path-to-public-directory/eur.ico'
}

// * so on and so forth

create an input component to hide all the details on how to put image/icon on input and the mapping, and include this input component that you will create on the main currency component with symbol as input/prop

score:0

i have a few points i want to highlight:

  • a way to solve this is creating a dictionary where you can define a flag using the currency.
  • creating a component where you send the currency can be a good practice to implement the dictionary
  • there are currencies where many countries use them, so in this case you need to define a flag or adapt your component to show the flags where the currency applies.
  • in your example you are overriding the state and deleting the information of your initial state, you need to add setstate({...state, }) and after that, new things.

here are my code snippets where you need to modify:

...
handlechange (event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    // add `...state` to avoid remove all your previous information
    setstate({ ...state, [name]: value });
  };
...
...
handlesubmit(event) {
    event.preventdefault(); //preventing form from submitting

    fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=my-token`)
    .then(res => res.json())
    .then(data => {
      const ratefromeurotoinput = data.rates[state.currencyinput]
      const inputineuros = state.amountinput / ratefromeurotoinput
      const ratefromeurotooutput = data.rates[state.currencyoutput]
      const eurosinoutput = inputineuros * ratefromeurotooutput

      // add ...state to avoid remove all your previous information
      setstate({ ...state, amountoutput: eurosinoutput })
    })
  };
...
...
render() {
  <>
      <div classname="card card-body p-3 mb-3 bg-light text-dark">
        <h1 classname="mb-4">currency converter</h1>

        <form onsubmit={handlesubmit}>
          <div classname="d-flex">
            <div classname="form-row col-md-6 col-sm-6 offset-1">
              <div classname="form-group col-md-8">
                <div classname="mb-2">
                  <label>
                    <strong>currency i have</strong>
                  </label>
                </div>
                <select
                  classname="form-select"
                  type="text"
                  name="currencyinput"
                  value={state.currencyinput}
                  onchange={handlechange}
                >
                  {state.options.map((option) => {
                    return <option value={option}>{option}</option>;
                  })}
                </select>
                {/* here goes your new component */}
                <flags currency={state.currencyinput} />
              </div>
...
}

i found an image api where you can define a flag using its country code country flags

using that i made this component

import react from 'react';
import flagsdata from '../../mocks/flags.json';

const flag_url = 'https://www.countryflags.io';
const { flagsfromcurrency, styles, sizes } = flagsdata;

const flags = ({ currency, style = styles.flat, size = sizes['16'] }) => {
  return (
    <img
      src={`${flag_url}/${flagsfromcurrency[currency]}/${style}/${size}.png`}
      alt={flagsfromcurrency[currency]}
    />
  );
};

export default flags;

this is the result:

enter image description here

and you can take a look at the code i made here

i hope this works for you.

update: i implemented bootstrap styles.


Related Query

More Query from same tag