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