I have an array containing various currencies:
const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS',
'AUD', 'AWG','AZN', 'BAM', 'BBD', 'BDT', 'BGN', ' BHD', 'BIF', 'BMD'
,'BND', 'BOB', 'BRL', 'BSD', 'BTN', 'BWP', 'BYN' ]
const firstCurrencies = currencies.slice(0,4)
Displayed below is the relevant code for my React component:
<div className="flex flex-col">
<h3>Select a currency</h3>
<div className="flex flex-row z-40">
{firstCurrencies.map((firstCurrency,index) =>(
<div className="">
<div key={index} className="">
<span><Link to="#">{firstCurrency}</Link></span>
</div>
<hr></hr>
</div>
))}
</div>
</div>
My question is: How can I add space after each currency item?
Currently, the display looks like this:
https://i.stack.imgur.com/i5v96.png
The goal is to have the currencies separated by spaces.
I attempted firstCurrencies.join(',') but it resulted in an error. Any suggestions?