Using HTML elements while mapping

Question

I am currently fetching a data table and it has 2 values needs to be mapped. Mapping works just fine but I want to add some customisation to the text.

newDataRows(
dataToBeMapped.map((m) => ({
id: m.id, data:`<span>Bold Me:</span>${m.oldData}`
})));

I was hoping to have  portion to be worked but I get [object Object] on my browser. Is there any way to implement HTML in this line?

How are you using this HTML? What you have is an object with two properties, one of which is a string. You may want to use a JSX element instead of a string, but that depends on how you're using it. What actually produces the incorrect output? Can you provide a minimal reproducible example which demonstrates the problem? — David
– David, Commented Nov 9, 2022 at 15:46
m.oldData is probably an object. Use JSON.stringify to parse it to text or access a text property directly. — Wimanicesir
– Wimanicesir, Commented Nov 9, 2022 at 15:51
@Wimanicesir it is an object indeed. Mbistami 's answer below just resolved my issue! — aiox
– aiox, Commented Nov 9, 2022 at 16:05

Moussa Bistami · Accepted Answer · 2022-11-09 15:54:45Z

1

replace data:'Bold Me:${m.oldData}' with data: <>Bold mem.oldData</>

And it's not HTML it is JSX
what's JSX?

answered Nov 9, 2022 at 15:54

Moussa Bistami

1,1078 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aiox Over a year ago

the title is not projecting the issue correctly, that is my bad. Addition to your correction, thank you for the solution which works perfectly. I'll check the page you sent for sure.

Collectives™ on Stack Overflow

Using HTML elements while mapping

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related