How to add HTML elements in to JavaScript object and use in react

Question

This is code in a JavaScript object

const AlbumDetails = [
{
    name: '<i class="fas fa-check">Basic</i>',
    price: '',
    details: [],
},
{ name: '<i class="fas fa-check">Intermediate</i>', price: '', details: [] },
{ name: '<i class="fas fa-check">Pro</i>', price: '', details: [] },
{ name: '<i class="fas fa-check">Ultimate</i>', price: '', details: [] },
];

export default AlbumDetails;

and I want to use this object like

const PriceCard = (props) => {
<div className="p-box">
                    
    <div className="p-content">
        <h2>{props.AlbumDetails[0].name}</h2>
        <h4>{props.AlbumDetails[0].price}</h4>
        
        
    </div>
</div>
}

so on. In the browser, it shows <i class="fas fa-check">Basic</i>, but I want only the icon and name "Basic" only. So how it could be done.

MrCode · Accepted Answer · 2021-06-03 11:27:46Z

1

The HTML string can be inserted using dangerouslySetInnerHTML:

<h2 dangerouslySetInnerHTML={{ __html: props.AlbumDetails[0].name }} />

Note: you need to be satisfied that the HTML is safe (i.e is not formed from user input), otherwise you could open yourself up to XSS.

answered Jun 3, 2021 at 11:27

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

2 Comments

Viranga Over a year ago

Thank you a lot, It's work. you save my day

KshitijV97 Over a year ago

Does this try to manually insert the tag in DOM?

KshitijV97 · Accepted Answer · 2021-06-03 11:29:55Z

1

Instead of keeping the entire JSX in the Array, keep only the words in array

const AlbumDetails = [
{
    name: 'Basic',
    price: '',
    details: [],
},
{ name: 'Intermediate', price: '', details: [] },
{ name: 'Pro', price: '', details: [] },
{ name: 'Ultimate', price: '', details: [] },

And keep the JSX in the component and instead only access the content like this

const PriceCard = (props) => {
<div className="p-box">
                    
    <div className="p-content">
        <h2><i class="fas fa-check">{props.AlbumDetails[0].name}</i></h2>
        <h4>{props.AlbumDetails[0].price}</h4>
    </div>
</div>

answered Jun 3, 2021 at 11:29

KshitijV97

4171 gold badge5 silver badges19 bronze badges

1 Comment

Viranga Over a year ago

Yeah, that's what I thought, but I have to reuse that priceCard component, Thank You.!!

coder_shanks · Accepted Answer · 2021-06-03 11:41:14Z

1

From your example, I see you are trying to show multiple elements of the same data source. You can use JavaScript map() function so that you don't have refer them using indices and avoid repeated lines of code. Please refer the below code.

const AlbumDetails = [
  {
    name: '<i class="fas fa-check">Basic</i>',
    price: "",
    details: []
  },
  { name: '<i class="fas fa-check">Intermediate</i>', price: "", details: [] },
  { name: '<i class="fas fa-check">Pro</i>', price: "", details: [] },
  { name: '<i class="fas fa-check">Ultimate</i>', price: "", details: [] }
];

const PriceCard = (props) => (
  <div className="p-box">
    <div className="p-content">
      {props.AlbumDetails.map((album) => (
        <div key={album.name}>
          <h2>{album.name}</h2>
          <h4>{album.price}</h4>
        </div>
      ))}
    </div>
  </div>
);

You can read more about this here

answered Jun 3, 2021 at 11:41

coder_shanks

1526 bronze badges

1 Comment

Viranga Over a year ago

Yeah, I will check that also.. Thank you.

Collectives™ on Stack Overflow

How to add HTML elements in to JavaScript object and use in react

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related