Блог

Я построил конвертер валют и хочу, чтобы рядом с аббревиатурой валюты также отображался флаг! Я получаю курсы валют из API, но не могу найти, как я могу отображать флаги рядом с ними! Я попытался создать script.js файл, включающий флаги, но не сработал! Я думаю, это довольно просто, однако я потратил много времени, чтобы найти способ!

Изображение приложения Конвертера

Код для компонента преобразователя:

   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!
 

вы можете исправить это, загрузив все изображения валют, которые вы будете использовать, и после этого создайте объект, который свяжет key: symbol; value: 'path-to-image'

Пожалуйста, ознакомьтесь с этим, чтобы узнать, как отображать значок внутри ввода

И обратитесь к этому, чтобы узнать, как включать изображения в React

Насколько я понимаю, конкретное решение может быть таким

 // * 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 

Создайте компонент ввода, чтобы скрыть все детали о том, как поместить изображение/значок на ввод и сопоставление, и включите этот компонент ввода, который вы создадите в основном компоненте валюты с символом в качестве ввода/реквизита

У меня есть несколько моментов, которые я хочу выделить:

• Способ решить эту проблему-создать словарь, в котором вы можете определить флаг с помощью валюты.
• Создание компонента, в который вы отправляете валюту, может быть хорошей практикой для реализации словаря
• Существуют валюты, в которых их используют многие страны, поэтому в этом случае вам нужно определить флаг или адаптировать свой компонент, чтобы показывать флаги, в которых применяется валюта.
• В вашем примере вы переопределяете состояние и удаляете информацию о своем начальном состоянии, вам нужно добавить setState({…состояние, }), а затем новые вещи.

Вот мои фрагменты кода, которые вам нужно изменить:

 ...
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>
...
}
 

Я нашел API изображений, в котором вы можете определить флаг, используя его код
страны Флаги стран

Используя это, я сделал этот компонент

 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;
 

Это и есть результат:

И вы можете взглянуть на код, который я сделал здесь

Я надеюсь, что это сработает для вас.

Обновление: Я реализовал стили начальной загрузки.