I built a currency converter and want to display next to currency abbreviation the flag also! I fetch the currency rates from API but cannot find how can I display the flags next to them! I tried to create a script.js file including the flags but didn't work! I guess is quite easy however I have spent a lot of time to find a way!

Converter Application Image

Code for Converter component:

  constructor(props) {
    super(props)
    this.state = { 
      currencyInput: 'USD',
      currencyOutput: 'EUR',
      amountInput: 0,
      amountOutput: 0,
      options: []
    }
 }


handleChange = event => {
  const target = event.target
  const value = target.value
  const name = target.name

this.setState({ [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[this.state.currencyInput] 
  const inputInEuros = this.state.amountInput / rateFromEuroToInput
  const rateFromEuroToOutput = data.rates[this.state.currencyOutput]
  const eurosInOutput = inputInEuros * rateFromEuroToOutput
  
this.setState({ amountOutput: eurosInOutput })
  })
}

componentDidMount() {
  fetch(`http://api.exchangeratesapi.io/v1/latest?access_key=API KEY`)
  .then(res => res.json())
  .then(data => {
    const currencyOptions = Object.keys(data.rates)

  this.setState({ options: currencyOptions })
  })
}


render() {
  return (
    <>
    <div className="card card-body p-3 mb-3 bg-light text-dark">
      <h1 className="mb-4">Currency Converter</h1>
        <form onSubmit={this.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={this.state.currencyInput}
                onChange={this.handleChange}
              >
                {this.state.options.map(option => {
                  return <option value={option}>{option}</option>
                  })
                }
              </select>
            </div>
            <div className="form-group col-md-8 mt-4">
              <div className="mb-2">
              <label><strong>Amount</strong></label>
              </div>
              <input className="form-control"
               name="amountInput"
               type="number"
               value={this.state.amountInput}
               onChange={this.handleChange} 
               />
            </div>
          </div>
          <div className="form-row col-md-6 col-sm-6">
            <div className="form-group col-md-8">
              <div className="mb-2">
                <label><strong>Currency I Want</strong></label>
              </div>
              <select className="form-select"
               type="text"
               name='currencyOutput'
               value={this.state.currencyOutput}
               onChange={this.handleChange} 
               >
              {this.state.options.map(option => {
                return <option value={option}>{option}</option>
                })
              }
              </select>
            </div>
            <div className="form-group col-md-8 mt-4">
              <div className="mb-2">
                <label><strong>Amount</strong></label>
              </div>
              <input className="form-control"
                name="amountOutput"
                type="number" 
                value={this.state.amountOutput}
                onChange={this.handleChange}
              />
            </div>
          </div>
        </div>
        <br/>
          <button type="submit" className="btn btn-primary mb-2">Convert</button>
        </form>
      </div>
    </>
    )
  }
}
export default Converter```

I would like to give any suggestion how to implement the flags with in the currency rows!
Thank you!

CodePudding user response：

I see the API doesn't provide the details about the Flag for the currency?

CodePudding user response：

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