React Render HTML object from JSON object

Question

I have to render html object Array in React JS Can anyone guide me how to use renderHTML function. output of the object is something like this: "

 const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML("{item.albComEn}")}</div>

another variation i tried 

const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML("item.albComEn")}</div>
    ));

output i get => "item.albComEn" or {item.albComEn}

what is in `item.albComEn`? What are you hoping to get instead? — mw509, Feb 28 '20 at 08:31
JSON array is mapped. "item" is one dummy variable used for array element. albComEn is one of the element that data holds. — Abdullah Mufti, Feb 28 '20 at 08:50

score 0 · Accepted Answer · answered Feb 28 '20 at 08:36

0

You can try with template strings. More info

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const items = this.state.Data.map(item => (
      <div key={item._id}>{renderHTML(`${item.albComEn}`)}</div>

answered Feb 28 '20 at 08:36

Dimuthu Nilanka

420
4
14

score 0 · Answer 2 · answered Apr 18 '21 at 13:49

You can also use short syntax of React Fragments i.e. '<> </>'. Use these to bracket to write the html code. When rendered the html code will successfully compiled. Example:

const service = [
        {
            htmlCode: <>
             <div>
               <h2>Application Screening</h2>
               <br />
               <br />
               What you can expect from us:<br />
                -   Your resume will be written by a team of seasoned experts<br />
                -   They will make sure that your Resume presents your strong points,
                    achievements & key skills in a recruiter-friendly format.<br />
             </div>
            </>
        },
]

Use inside render method as

...
 render(
  <div>
       {service[0].htmlCode}
  <div>
 )
}

React Render HTML object from JSON object

2 Answers2