Question

Views

I'm trying to insert an image depending on a state - but this will display the string of img src=${redExclamation} .

return `${
    isEmpty
        ? `<img src=${redExclamation} />`
        : `<img src=${greenCheck} /> `
    }`;

I've tried it a different way where i got rid of the string literal:

return `${
    isEmpty
        ? <img src=${redExclamation} />
        : <img src=${greenCheck} />
    }`;

But this will show [object Object] in the HTML. Not sure what I should be doing here. Any help would be appreciated!

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-07-10T18:12:08.304Z

you are returning a string, not html.

return isEmpty
        ? <img src={redExclamation} />
        : <img src={greenCheck} />;

Might be what you need

Answer 2 · 2022-07-10T18:12:08.310Z

You can try without the outer literal like the following:

return isEmpty ? `<img src=${redExclamation} />` : `<img src=${greenCheck} />`

Or if you're trying to return a jsx you should do it as per docs