[React] #7.2 Coin Tracker

import { useEffect, useState } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [money, setMoney] = useState("");

  const onChange = (event) => {
    setMoney(event.target.value);
  };

  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers?limit=10")
      .then((response)=> response.json())
      .then((json) => {
        setCoins(json)
        setLoading(false);
      });
  }, []);
  return (
    <div>
      <h1>The Coins! {loading? "" : `(${coins.length})`}</h1>
      <label>Dollar</label><input onChange={onChange} value={money} type="text" placeholder='Dollar'/> -> 
      <label>BTD</label><input value={money / 31120} type="text" placeholder='Coin'/>
      <hr></hr>
      {loading? <strong>Loading...</strong> : 
        <select>
          {coins.map((coin) =>( 
            <option>
              {coin.name} ({coin.symbol}) : $ {coin.quotes.USD.price} USD
            </option>
          ))}
        </select>
      }
    </div>
  );
}
export default App;

실행화면