My objective: to inject two letter country codes inside a url I split in half
https://www.worldometers.info//img/flags/small/tn_al-flag.gif I'm looking to vary the 'al' value dynamically.
However, I want to inject Object.keys(price) instead of 'Albania' so that i can map through all European countries. For some this works on the title atribute of the Card but not inside the image src. i get the following warning when I try to replace "Albania' with Object.keys(price). As you can see, it doesen;t recognize Object.keys(price)!, it thinks it's undefined
Any of you got ideas? Thank you guys so much for your responses!!
import React, { useState } from 'react';
import { Card, Row, Col } from 'antd';
import { useGetGasPricesQuery } from '../services/gasApi';
const US = () => {
const { data: europePriceList, isFetching } = useGetGasPricesQuery();
const [prices, setPrices] = useState(europePriceList);
const lookup = require('country-code-lookup');
const Mexico = 'Mexico';
console.log(lookup.byCountry('Albania').iso2.toLowerCase());
const flagUrl1 = 'https://www.worldometers.info//img/flags/small/tn_';
const flagUrl2 = '-flag.gif';
console.log(prices);
console.log(!prices);
if (isFetching) return 'Loading...';
return (
<>
<Row gutter={[32, 32]} className="crypto-card-container">
{europePriceList.map((price) => (
<Col xs={24} sm={12} lg={6} className="crypto-card">
<Card
title={`${Object.keys(price)}`}
extra={
<img
className="crypto-image"
src={
flagUrl1 +
`${lookup.byCountry('Albania').iso2.toLowerCase()}` +
flagUrl2
}
></img>
}
>
<p>
Gasoline: <i>{Object.values(price)[0].gasolineEuro95} €/lt </i>
</p>
<p>
Diesel: <i>{Object.values(price)[0].diesel} €/lt </i>
</p>
<p>
LPG: <i>{Object.values(price)[0].lpg} €/lt </i>
</p>
</Card>
</Col>
))}
</Row>
</>
);
};
export default US;