CODEWITHSUNDEEP
javascriptreactjs
user16516348
user16516348

Reputation: 117

How to remove separator icon for last array map?

I have an array of strings that I want to render in a way that's one after the other with arrows in between as separators.

const folders = ["Folder 1", "Folder 2"]

So I tried the following code :

<div style={{display: "flex"}}>
   {folders.map(folder => (
     <p><i className='fa fa-folder'></i> {folder} <i className="fa fa-chevron-right"></i></p>
   ))}
</div>

What this does it put that arrow icon after every folder but i don't want it to put that arrow after the last folder. How do I fix?

Upvotes: 3

Views: 1080

Answers (4)

Al Emran
Al Emran

Reputation: 76

Try:

<div style={{display: "flex"}}>
  {folders.map((folder, key) => (
   <p><i className='fa fa-folder'></i> {folder} 
   {index !== (folders.length - 1) ?  <i className="fa fa-chevron-right"></i> : ''} </p>
 ))}
</div>

Upvotes: 2

Yves Kipondo
Yves Kipondo

Reputation: 5613

With Array.prototype.map you can have access to the index of item of the array in which you are performing a map

<div style={{display: "flex"}}>
    {folders.map((folder, index) => {
        return (
            <p key={index}>
                <i className='fa fa-folder'></i> 
                {folder} 
                {index !== folders.length - 1 ? <i className="fa fa-chevron-right"></i>: null}
            </p>
         )
        );
    })}
</div>

As you can see I add a line which check if the current index in the map is equal to the length of the folders and if is not the case the closing chevron is display otherwise it is not display.

Upvotes: 5

Amruth
Amruth

Reputation: 5912

Make use of index and array length.

<div style={{display: "flex"}}>
   {folders.map((folder, index) => (
     <p><i className='fa fa-folder'></i> {folder} {folders.length-1 !== index && <i className="fa fa-chevron-right"></i>}</p>
   ))}
</div>

Upvotes: 1

Murat Karag&#246;z
Murat Karag&#246;z

Reputation: 37604

You can use the index parameter of the map function e.g.

<div style={{display: "flex"}}>
   {folders.map((folder, index) => (
     <p><i className='fa fa-folder'></i> {folder} 
     {index < folders.length -1 && <i className="fa fa-chevron-right"></i>}
</p>
   ))}
</div>

Upvotes: 1

Related Questions