import { useState, useEffect } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]); //기본 값을 [] 배열로 설정하지 않으면 undefined가 되고 jsx에 undefined.length를 가져오게 되서 에러가난다.
useEffect(() => {
fetch("https://api.coinpaprika.com/v1/tickers?limit=100")
.then((response) => response.json())
.then((json) => {
setCoins(json);
setLoading(false);
});
}, []);
return (
<div>
<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
{loading ? (
<strong>Loading..</strong>
) : (
<select>
{coins.map((coin) => (
<option>
{coin.name}({coin.symbol}):{coin.quotes.USD.price}{" "}
USD
</option>
))}
</select>
)}
</div>
);
}
export default App;
'코딩 > Today I Learn' 카테고리의 다른 글
React learning #9 useParams, gh-pages deploy (0) | 2022.04.11 |
---|---|
React learning #8 Movie App ,Router, Link to (0) | 2022.04.07 |
React learning #6 to Do List ,map (0) | 2022.04.06 |
React learning #5create react app,css Modules,useEffect,cleanUp (0) | 2022.04.03 |
React learning #4 prop,React.memo(),btn.propTypes={} (0) | 2022.03.30 |