mapping through an array with string objects and render the HTML tags

Question

I'm creating a simple React application, and I have to map through an array like this:

const data = [
   {
    id: 1,
    string: "my dog is a <strong>poodle</strong>"
},
{id: 2,
 string: "my cat is nice"

}

]

Sometimes inside the string, I have some strong tags to render. When I try to render that sentence, I will see the html rendered. If I try to use a template literal and assign that strong tag to a variable, I will have the [object object] error. How can I render tags in this situations? Trying if possible to avoid the "setDangerouslyHTML" prop. This is my mapping function:

data.map(da=>{

  return (<li key={da.id}>{da.string}/>)
}

Thanks for the help!

Dan Hunex · Accepted Answer · 2021-03-05 20:53:09Z

1

You didn't properly close the tag

data.map(da=>(<li key={da.id}>{da.string}</li>))

Edit If you want to display the tag in the string , you can do

data.map(da=>(<li key={da.id} dangerouslySetInnerHTML={{ __html: da.string }}></li>))

Here is a working example

edited Mar 5, 2021 at 20:53

answered Mar 5, 2021 at 20:47

Dan Hunex

5,3182 gold badges31 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

mapping through an array with string objects and render the HTML tags

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related