Как заставить работать конвертер валют?

Question

[nickname13384]

Как заставить работать конвертер валют? Не получается вернуть значение из функции.
Может можно сделать еще проще и написать меньше кода, чем писать if для каждой валюты.
Код здесь: https://codepen.io/pagetesttask/pen/ZgWVLZ

Comments

[NiyazNA]

Просмотрел код. На первый взгляд ошибка кроется тут:

currency = price => {
    fetch("http://www.floatrates.com/daily/rub.json")//вы вызываете асинхронный метод fetch
      .then(res => res.json())
      .then(data => {
      // Например нужно конвертировать в евро
      let value = this.state.filter.toLowerCase();
      if(value === 'eur'){
        return price * value
      // Как теперь это выражение можно вернуть?
     
      }
    });
  return price;//и при этом, не дожидаясь результата фетча, возвращаете price, который по умолчанию в рублях
  };

[nickname13384]

NiyazNA, это для примера, если не возвращать то не будет отображаться цена

Answer 1

[0xD34F]

Зачем при каждом выводе цены получать информацию по валютам? Запрашивайте её один раз, при создании экземпляра компонента, сохраняйте в стейт, при выводе цены доставайте нужный rate:

class App extends React.Component {
  state = {
    rates: {
      RUB: 1,
    },
    currency: 'RUB',
    currencies: [
      { name: 'RUB', label: 'RUB' },
      { name: 'USD', label: 'USD' },
      { name: 'EUR', label: 'EUR' },
    ],
  }

  onCurrencyChange = ({ target: { dataset: { currency } } }) => {
    this.setState({ currency });
  }

  componentDidMount() {
    fetch('https://www.floatrates.com/daily/rub.json')
      .then(res => res.json())
      .then(data => {
        this.setState(({ rates }) => ({
          rates: {
            ...rates,
            ...Object.values(data).reduce((acc, n) => (acc[n.code] = n.rate, acc), {}),
          },
        }));
      });
  }

  render() {
    const { currency, currencies, rates } = this.state;

    return (
      <div>
        {currencies.map(({ name, label }) => (
          <button
            className={`btn__item ${currency === name ? 'active' : ''}`}
            data-currency={name}
            onClick={this.onCurrencyChange}
          >
            {label}
          </button>
        ))}
        {this.props.products.map(({ name, price }) => (
          <div>
            <span>{name}</span>
            &nbsp;
            <span>{(price * rates[currency]).toFixed(2)} {currency}</span>
          </div>
        ))}
      </div>
    );
  }
}

const products = [
  { name: 'яблоки', price: '80' },
  { name: 'греча', price: '50' },
  { name: 'конфеты', price: '380' },
];

ReactDOM.render(<App products={products} />, document.getElementById('root'));

Comments

[nickname13384]

Отличное решение, спасибо, а где вы так так кодить научились?