Estoy obteniendo una lista de canciones de mi base de datos que tiene este formato:
" 01. Intro 02. Waage 03. Hyänen (feat. Samra) 04. Ich will es bar (feat. Haftbefehl) 05. Am Boden bleiben (feat. Casper & Montez) "
Es una sola Cadena. En este momento simplemente lo estoy llamando con:
if (album && album.title) { trackList = ( <div className={'trackList'} style={{ fontSize: 16 }}> {album.tracklist} </div> ); }y {trackList} en mi aplicación. Mi objetivo es diseñarlo, por lo que hace una nueva línea cuando comienza un nuevo Número. ¿Hay alguna manera de lograr esto?
Puede dividir su cadena en una matriz mediante el método de split y luego iterar sobre la matriz mediante el método de map , así:
if (album && album.tracklist) { trackList = ( <div className={'trackList'} style={{ fontSize: 16 }}> {album.tracklist .trim() .split(/\D(?=\d+\.\s)/g) .map((t, i) => ( <p key={i}>{t}</p> ))} </div> ); } en lugar de la etiqueta <p> en el código anterior, puede usar cualquier etiqueta html para generar el resultado esperado.