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?

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?

• javascript
• reactjs

Share Improve this question Follow asked Aug 2, 2021 at 6:36 user16516348user16516348 11799 bronze badges 1

• Map can take a second argument for index. folders.map((folder, index) =>... use the index to check if it is the last element to skip adding the arrow icon. – Coding Otaku Commented Aug 2, 2021 at 6:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

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>

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>

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>