CODEWITHSUNDEEP
javascriptreactjs
tom harrison
tom harrison

Reputation: 3433

insert html tags into replace function

I would like to wrap Aufpreis in bold html tags to highlight this but if I insert html it treats them as part of the string, how can I insert html tags?

data

[item_1, item_2, item_3, item_4]

app.js

const Items = getItems(state).map((item) => {
            return {
            label: `${item.alias.replace('item', '')}(<b>Aufpreis</b>: ${item.value}euro)`,
            value: item.alias
            };
          });


const App = ({Items}) => (
{Items}
)

Upvotes: 0

Views: 302

Answers (1)

ᴘᴀɴᴀʏɪᴏᴛɪs
ᴘᴀɴᴀʏɪᴏᴛɪs

Reputation: 7529

You can assign JSX to the object property instead of assigning a string.

There needs to be a grouping tag, surrounding your elements. If you don't want to use a div you can use a Fragment tag (React.Fragment) and wrap any code evaluation you need to do between {}.

label: <React.Fragment>{item.alias.replace('item', '')}<b>Aufpreis</b>:({item.value}euro)</React.Fragment>

or

label: <div>{item.alias.replace('item', '')}<b>Aufpreis</b>:({item.value}euro)</div>

Upvotes: 1

Related Questions