React coin calculator

코인 API불러오고 보여주는거에 추가기능으로 Budget을 넣으면 코인을 얼마나 살 수 있는지 구현해봄.

[전체코드]

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  const [budget, setBudget] = useState("");
  const [letSee, setLetSee] = useState(0);

  const onChange = (event) => setBudget(event.target.value);
  const onSelect = (event) => setLetSee(event.target.value);

  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
    setLoading(false);
  }, []);
  return (
    <div>
      <h1>
        The Coins!! (HOW MANY COINS? {loading ? " " : `(${coins.length})`})
      </h1>
      {loading ? (
        <strong>Loading...</strong>
      ) : (
        <select onChange={onSelect}>
          {coins.map((coin, index) => (
            <option value={index} key={coin.id}>
              {coin.name}({coin.symbol}:{coin.quotes.USD.price})
            </option>
          ))}
        </select>
      )}

      <hr></hr>
      <form>
        <label htmlFor="USD"> USD $</label>
        <input
          onChange={onChange}
          id="USD"
          value={budget}
          type="number"
          placeholder="please put how much you wanna buy the selected coin"
        ></input>
        <h2>
          {loading ? null : coins[letSee]?.symbol}
          <br />
          {budget !== ""
            ? budget / coins[letSee]?.quotes.USD.price
            : "put your budget!"}
        </h2>
      </form>
    </div>
  );
}

export default App;

시간 타는거 꿀잼