CODEWITHSUNDEEP
javascriptarraysreactjs
RandomDeveloper
RandomDeveloper

Reputation: 873

Adding space to array list item in React

I have some data stored in an array:

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)

My React component relevant code here:

<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>

What is the best way to add space to after the item.

At the moment its displaying like this:

enter image description here

The idea is to have the currencies separated by a space.

I have tried firstCurrencies.join(',') at the top but giving me an error.

Any tips?

Upvotes: 1

Views: 619

Answers (2)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

It's quite simple. Space can be added in the following ways:

<span><Link to="#">{firstCurrency}{' '}</Link></span>

OR

<span><Link to="#">{`${firstCurrency} `}</Link></span>

OR

<span><Link to="#">{firstCurrency + ' '}</Link></span>

Upvotes: 1

Paul Zaslavskij
Paul Zaslavskij

Reputation: 654

at first, this is visual bug and questions with css^ so you can solve it using paddings and margins. But other way is using template strings, something like:

`${firstCurrency} `

that is the way to get your result. i recommend resolve your issue using css instead of template strings

Upvotes: 1

Related Questions