[React] coin tracker 심화 - 달러를 비트코인 단위로 바꾸기

달러를 비트코인 단위로 바꾸기 기능이랑 컴포넌트들 여러개로 분할해봤다.

 

import Button from "./Button";
import styles from "./App.module.css";
import {useState,useEffect} from "react";
 
function Convert({currentMoney}){
  
  const[dollar,setDollar]=useState(0);
  const[convert,setConvert]=useState(false);
 
  const onSubmit=(event)=>{
    event.preventDefault();
    setConvert(true);
  }
  const onChange=(event)=>{
      setDollar(event.target.value);
      
  }
 
 
   
  
  return(
    <div>
      
      <form onSubmit={onSubmit}>
          <input onChange={onChange} type="text" placeholder="write down dollar" value={dollar} >
 
          </input>
          <button>convert</button>
      </form>
      {convert?<div>
        {(dollar/currentMoney).toString()}
      </div> : null}
    </div>
 
  );
}
 
function Selection({coins}){
  const[selectFin,setSelectFin]=useState(false);
  const [currentCoin,setCurrentCoin]=useState("");
  const[currentMoney,setCurrentMoney]=useState(0);
  
  const onChange=(event)=>{
    
    setCurrentMoney(event.target.value);
    
    setSelectFin(true);
  }
  
  
  return(
    <div> 
      💜USD to  💜
      <select onChange={onChange} >
        {coins.map((coin)=>
          
          <option value={coin.quotes.USD.price}>{coin.name}({coin.symbol}):${coin.quotes.USD.price}</option>
          
        )}
        
        
      </select>
      {selectFin?<Convert currentMoney={currentMoney}/>:null}
      
    </div>
  );
}
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);
    });
  },[]);
 
  return <div>
    <h1>🧀The Coins!({coins.length})</h1>
    {loading?<strong>Loading...</strong>:<Selection coins={coins}/>}
  
    
  
    
  </div>
  
 
 
 
}
 
export default App;
 

 

흠 근데 여기서 문제는 

요 부분인데 

option 속성에서 value를 비트코인 단위랑 coin.symbol 모두 다 받아오고 싶은데 값 두개를 받아오는게 안됐다.

사실 내가 하고 싶었던건 option에서 value를 두개 받아와서 usd to {currentCoin}이 하고 싶었는데 왜 안되는지 모르겠다...