React.js start a new line after every number

Issue

I am fetching a tracklist from my database which has this format :

" 01. Intro 02. Waage 03. Hyänen (feat. Samra) 04. Ich will es bar (feat. Haftbefehl) 05. Am Boden bleiben (feat. Casper & Montez) "

It is one single String. Right now I am simply calling it with :

if (album && album.title) {
    trackList = (
        <div className={'trackList'} style={{ fontSize: 16 }}>
            {album.tracklist}
        </div>
    );
}

and {trackList} in my App. My goal is to style it, so it makes a new line when a new Number starts. Is there an way to achieve this?

Solution

You can split your string to an array by split method and then iterating over array by map method, like this:

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>
    );
}

instead of <p> tag in the above code, you can use any html tag, to generate your expected result.

Answered By - Saeed Shamloo