[React Study] CoinTracker

import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

function ConinSelector(props) {
  return (
    <select onChange={props.onChange} style={{ width: '300px' }}>
      {props.coins.map((coin, index) => (
        <option key={index}>
          {coin.name} ({coin.symbol}) - {coin.quotes.USD.price}
        </option>
      ))}
    </select>
  );
}

ConinSelector.prototype = {
  coins: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
};

function CoinTracker() {
  const [isLoading, setIsLoading] = useState(true);
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers')
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setIsLoading(false);
      });
  }, []);

  const onCoinSelectChanged = (event) => {
    console.log('onCoinSelectChanged : ' + event.target.value);
  };

  return (
    <div>
      <h1>Coin Tracker</h1>
      {isLoading ? (
        <strong>Loading...</strong>
      ) : (
        <ConinSelector coins={coins} onChange={onCoinSelectChanged} />
      )}
    </div>
  );
}

export default CoinTracker;