Exchange.jsx

import React, { useEffect, useState } from "react";
import axios from "axios";

const Exchange = () => {
  const [data, setData] = useState({});
  const [pln, setPln] = useState("");
  const [currency, setCurrency] = useState("USD");
  const [currencies, setCurrencies] = useState([]);
  const [result, setResult] = useState("");

  useEffect(() => {
    getValues();
  }, []);
  const getValues = async () => {

    const fetchApi = "https://api.exchangerate-api.com/v4/latest/PLN";
    await axios.get(fetchApi).then(res => {
      setData(res.data.rates);
      setCurrencies(Object.keys(res.data.rates));
    });
  };

  const convertPlnToCurrency = () => {
    let result = pln * data[currency] + ` ${currency}`;
    setResult(`${pln} PLN = ${result}`);
  };

  const changePln = e => {
    setPln(parseInt(e.target.value));
  };

  const changeCurrency = e => {
    setCurrency(e.target.value);
  };

  return (
    <div>
      <h1>Exchange</h1>
      PLN
      <input type="text" value={pln} onChange={changePln} />
      to
      <select value={currency} onChange={changeCurrency}>
        {currencies.map(currency => (
          <option key={currency} value={currency}>
            {currency}
          </option>
        ))}
      </select>
      <button onClick={convertPlnToCurrency}>Convert</button>
      <div>
        <h3>{result ? result : ""}</h3>
      </div>
    </div>
  );
};

export default Exchange;