Add a line break into the long string in React

Question

I have a string that shows some values separated by commas (,). when I added it to my < li > tag it shows perfectly if the values are less than 6 items. But if it exceeded I want it to move into the next line. Please find the screenshots

following is my code

<li>{movieData.seats}
<br/>( {seatCount.length} Tickets ) ODC <span>Rs . {(parseFloat(CalAdultPrice).toFixed(2))}</span>
</li>

any solutions..

Answer 1

You need to wrap your {movieData.seats} with some element and apply this styles to it:

word-break: break-word;
white-space: pre-wrap;

Answer 2

Using JavaScript

You'll need to split your movieData.seats into an array of arrays. This SO post has various implementations of how to do it. My first thought was if you already are using lodash, you can use _.chunk to save yourself having to write your own.

Here's a quick example of making the 2d array:

const seats = 'A6,C5,B6,B5,B3,B2,B4,B2'
const splitSeats = seats.split(',')

const lineLength = 6

const chunk = (arr, length) => {
    let tmp = []

    for (let i = 0; i < arr.length; i += length) {
        tmp.push(arr.slice(i, i + length));
    }
    
    return tmp
}

console.log(chunk(splitSeats, lineLength))

Then to use it in your render:

// bla...
{chunkedArray.map(seats => (
    <React.Fragment key={/*some key here*/}>
        {seats.map(seat => <span key={seat}>{seat},</span>)}
        <br />
    </React.Fragment>
))}
// bla...

Using HTML/ CSS

Wrap your movieData.seats in an element with a fixed width and use CSS to break up the string. e.g.

.seats {
    width: 140px;
    word-break: break-word;
}