JSX converts embedded variables as strings

Question

I am trying to dynamically generate some empty space based on an integer values.

I thought the following would work :

function createTab(level) {

    let y = "";

    for (let i = 0; i < level; i++) {
        y = y + " &nbsp; ";
    }

    let x = <span>{y}</span>;
    return x
}

However JSX renders this in quoting the y value within the span elements. The quoting is causing the &nbsp to be displayed as text.

what am I doing wrong?

Try using https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml if you really need this feature. Sometimes rendering HTML directly is not a good idea, because of vulnerabilities. React escapes strings before render by default. — Roman Kotov, Oct 18 '18 at 15:09
Considering minimal changes in the code and my previous comment, the last part of function can be rewritten as `return ` — Roman Kotov, Oct 18 '18 at 15:14
Possibly this question is also related to https://stackoverflow.com/questions/37909134/nbsp-jsx-not-working — Roman Kotov, Oct 18 '18 at 15:16

score 1 · Answer 1 · answered Oct 18 '18 at 15:17

I need to use the unicode character " \u00A0 " and it works :

function createTab(level) {

    let y = "";

    for (let i = 0; i < level; i++) {
        y = y + " \u00A0 ";
    }

    let x = <span>{y}</span>;
    return x
}

JSX doesn't seem to like HTML codes

JSX converts embedded variables as strings

1 Answers1