[FIXED] How can I add "space" to the output without wrapping the text (React, typescript)

Issue

I want to display the current time as "hh:mm Uhr" in my table column. It works well until I add a space within the code between the hh:mm and the word 'Uhr'. If I do so, the text will wrap. It seems to me that the space character functions as enter within the code. Does anyone have a solution for me that might work?

Here is my code:

let currentTime = `${hours.toString().length === 1 ? `0${hours}` : hours}:${minutes.toString().length === 1 ? `0${minutes}` : minutes} Uhr`;

The piece of code I mean is in the end: minutes} Uhr`;

The output if I leave out space:

09:33Uhr

The output if I put space there:

09:33
Uhr

Solution

I solved the problem with a different approach. There is a plugin called dayjs. It makes using time and editing it a lot easier.

This is my code now:

function processDate(date: string) {
    const parsedDate = dayjs(date).locale("de"); {/*Enter your country letters here to use your local time*/}
    return (
        <>
            <div>
                {parsedDate.format('DD MMM YYYY')}  {/Output: *01 Jan 1970*/}
            </div>
            <div>
                {parsedDate.format('HH:mm')} h {/Output: *00:00 h*/}
            </div>
            <div>
                {parsedDate.from(dayjs())} {/*takes the difference from then to now*/}
            </div>
        </>
    )
    /*format('DD MMM YYYY, HH:mm [h]');*/

You have to install dayjs to use it. Also, there is a nice documentation about it: https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#displaying

Answered By - tamila

Answer Checked By - David Marino (PHPFixing Volunteer)