With my endpoint I can fetch data and set currency as a parameter, so that data received is converted into the currency user chooses. I am passing the currency as a prop into a component that renders that data The problem is that I am having trouble displaying the price dynamically. I am not sure how can I concatenate the JSX correctly... {crypto.quote.${currency}.price.toFixed(2)} just prints the string. Hardcoding the currency (USD, EUR etc) renders the price, but I want it to be dynamic. Thank you, help please :)
import React from 'react'; import { Link } from "react-router-dom" const Crypto = ({ crypto, currency }) => { return <> <tr> <td>{crypto.cmc_rank}</td> <td> <Link to={{ pathname: `/crypto/${crypto.id}`, state: crypto }}> {crypto.name} </Link> </td> <td>{crypto.symbol}</td> <td> {`crypto.quote.${currency}.price.toFixed(2)`} </td> <td>{crypto.quote.USD.percent_change_24h}</td> <td> {crypto.quote.USD.market_cap.toString().slice(0, 3) + "B"} </td> </tr> </> } export default Crypto; 
