CODEWITHSUNDEEP
reactjsjavascript-objectshtmlelements
Viranga
Viranga

Reputation: 49

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

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.

Upvotes: 3

Views: 3143

Answers (3)

coder_shanks
coder_shanks

Reputation: 152

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

Upvotes: 1

KshitijV97
KshitijV97

Reputation: 397

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>

Upvotes: 1

MrCode
MrCode

Reputation: 64526

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.

Upvotes: 1

Related Questions