Tengo una matriz de cadenas que quiero representar de una manera que es una tras otra con flechas en el medio como separadores.
const folders = ["Folder 1", "Folder 2"]
Así que probé el siguiente código:
<div style={{display: "flex"}}> {folders.map(folder => ( <p><i className='fa fa-folder'></i> {folder} <i className="fa fa-chevron-right"></i></p> ))} </div>¿Qué significa esto? Pone ese icono de flecha después de cada carpeta, pero no quiero que ponga esa flecha después de la última carpeta. ¿Cómo lo arreglo?
Con Array.prototype.map puede tener acceso al índice de elementos de la matriz en la que está realizando un mapa
<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> Como puede ver, agrego una línea que verifica si el índice actual en el mapa es igual a la longitud de las folders y, si no es así, se muestra el cheurón de cierre; de lo contrario, no se muestra.
Probar:
<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>Puede usar el parámetro de index de la función de map , por ejemplo
<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>