Using Template Literals In JSX That Also Returns HTML

[ErcDz]

This is the following code:

    <div>{
        !breakStarts ? 
        `Work:` {workMinutes}`:`{workSeconds < 10 ? `0${workSeconds} :` workSeconds}} : 
        `Break:` {breakMinutes}`:`{breakSeconds < 10 ? `0${breakSeconds} :` breakSeconds}}
        }
    </div>

As you can see, I want different messages to display depending on the truthiness of breakStarts. However, I can’t seem to use template literals in JSX. Is doing this possible or is there a better way?

[szeleskrisz]

Did you meant to do something like this?

const result = !breakStarts ? 
    (workSeconds < 10 ? `Work: ${workMinutes}:0${workSeconds}` : `Work: ${workMinutes}:${workSeconds}`):
    (breakSeconds < 10 ? `Break: ${breakMinutes}:0${breakSeconds}` : `Break: ${breakMinutes}:${breakSeconds}`)