Adjacent JSX elements must be wrapped in an enclosing tag

호두·2022년 6월 14일
0

에러 메시지
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

원인
1. react app이 return하는 내용들은 div로 묶어야 한다.
2. return문 안에서 삼항연산자를 사용했는데 false일 때 로딩할 코드를 div로 한번 더 감싸지 않아 발생했다.

해결
div 태그를 추가

import { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
    .then((response) => response.json())
    .then((json) => {
      setCoins(json);
      setLoading(false);
  });
}, []); // 로딩 직후 1회만 코드 실행

return(
  <div>
    <h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
    {loading ? (<strong>Loading...</strong>
    ) : (
	   	<div> // div 추가
          <input placeholder='KRW'></input>
          <select>
            {coins.map((coin) =>
              <option>
                {coin.name} ({coin.symbol}:{coin.quotes.USD.price} USD)
              </option>)}
          </select>
        </div> // div 추가
    )}
  </div>
  )
};

export default App;
profile
web developer

0개의 댓글