Блог

Итак, я работал над небольшим проектом, в котором я использую coinmarketcap.com API для получения данных о криптовалюте и отображения их в виде таблицы внутри веб-страницы. Я использую Node.js в качестве бэкэнда.

Мне удалось получить данные из API и отобразить в виде таблицы. Вот моя проблема — я хочу отобразить цены на криптовалюту в 2 валютных значениях. Поэтому я использовал переключатель. Итак, когда я переключаюсь true , я хочу отобразить таблицу с ценами в долларах США. И когда переключатель false включен, я хочу отобразить таблицу с ценами в INR.

Вот мой код.

 function Home() {

const [coins,setCoins]=useState([])
const [search,setSearch]=useState("")
const [switchState,setSwitchState]=useState(true)
const [currency,setCurrency]=useState("USD")

//Here's my API call. I set currency="USD" or "INR" based on the change of event in my Bootstrap switch

useEffect(() => {
  axios.get(`http://localhost:9000/api/${currency}`).then(
                                (response)=>{
                                    setCoins([])
                                    setCoins(response.data)
                                })
},[])

//This function is for filtering search
const filterCoins=coins.filter
(
       coin => coin.name.toLowerCase().includes(search.toLowerCase())
    )

return (
    <>
    <div className="container">
     <div className="col-lg-6 col-md-6 col-sm-5 d-flex mt-3">
        <input className="form-control" type="search" placeholder="Search" aria-label="Search" onChange={
                (e)=>{setSearch(e.target.value)}
                }/>
            <div className="ml-5">

//This is the Switch where I set currency="USD" or "INR"

            <BootstrapSwitchButton
                checked={switchState}
                onlabel='USD'
                offlabel='INR'
                onChange={(event)=>{
                    setSwitchState(event)
                        if(switchState==true){
                            setCurrency("USD")
                            console.log(switchState)                            
                        }else{
                            setCurrency("INR") 
                            console.log(switchState)
                        }
                    }}/>

            </div>
        </div>

        <table className="table table-secondary table-bordered table-striped mt-3">
        <tbody>
        <tr>
        <td className="fw-bold" >Coin</td>
        <td className="fw-bold">CryptoName</td>
        <td className="fw-bold">Price</td>
        <td className="fw-bold">24Hr Change</td>
        <td className="fw-bold">Market Cap</td>
        <td className="fw-bold">24Hr Volume</td>
        </tr>
//This is where I import rows from my Coin component based on the Switch state(whether true or false)
         {   switchState?(
              filterCoins.map((coin)=>{
                return(
               <Coin
               key={coin.id}
               name={coin.name}
               symbol={coin.symbol} 
               price={coin.quote.USD.price}
               change24hr={coin.quote.USD.percent_change_24h}
               marketCap={coin.quote.USD.market_cap}
               vol24hr={coin.quote.USD.volume_24h}/>
                )
            })

             ):(
                filterCoins.map((coin)=>{
                    return(
                   <Coin
                   key={coin.id}
                   name={coin.name}
                   symbol={coin.symbol} 
                   price={coin.quote.INR.price}
                   change24hr={coin.quote.INR.percent_change_24h}
                   marketCap={coin.quote.INR.market_cap}
                   vol24hr={coin.quote.INR.volume_24h}/>
                    )
                })
               
             )
        }

        </tbody>
        </table>
    </div>
    </>
)
export default Home
}
 

Вот ошибка, которую я получаю:
ошибка

Дело в том, что этот код отображает таблицу с ценой в долларах США. Но, как только я использую Switch, он выдает мне эту ошибку.

Я знаю, что это слишком сложно. Но, пожалуйста, помогите мне кто-нибудь. Пожалуйста.

Заранее благодарю вас 🙂