Adding space to array list item in React

Question

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:

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?

I think, if you're using bootstrap you can add the class px-1 to the first div within the map's handler -> <div class="px-1"> or maybe pr-1 to avoid left padding. — Ele
– Ele, Commented Jan 27, 2021 at 7:56

Paul Zaslavskij · Accepted Answer · 2021-01-27 07:54:41Z

1

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

answered Jan 27, 2021 at 7:54

Paul Zaslavskij

6424 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Surjeet Bhadauriya · Accepted Answer · 2021-01-27 08:02:50Z

1

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>

edited Jan 27, 2021 at 8:02

answered Jan 27, 2021 at 7:57

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

Collectives™ on Stack Overflow

Adding space to array list item in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related