How to display data with div tag inside an array in react js?

Question

I am creating a react app and getting all data from API calls. I have set data into an array and need to display them. My data set is like below.

[{idappcontent: "Sign_01", content: "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday </div>"}
{idappcontent: "Sign_02", content: "<div style=\"text-align:center\"> <label for=\"firstName\">First Name</label></div><div style=\"margin-top: 3%;\"><input id=\"fname\" name=\"firstName\" onkeyup=\"FirstnameValidation()"/></div>"}
{idappcontent: "Sign_03", content: "<div style=\"text-align:center\"> <label for=\"lname\">Last Name</label> </div><div style=\"margin-top: 3%;\"><input id=\"lname\" name=\"lname\" style=\"font-family: trajanPro;width:10 /></div>"}
{idappcontent: "Sign_04", content: "<div style=\"text-align:center\"><label for=\"email\">Email Address</label></div><div style=\"margin-top: 1%;\"><input id=\"email\" type=\"email\" name=\"email\" onkeyup=\"emailvalidat()"/></div>"} ]

How can I display "content" data in react js?

How to display them inside div tag like below

<div class="Header-banner" style="text-align: center;" id="Sign_01"></div>
    <div id="Sign_02"></div>
    <div id="signUpfrm" style="width:100%">
        <div style="text-align:center">
            <div style="display:inline-table;width:100%">
                <div id="Sign_03" style="display: inline-block; text-align: right; width: 32%;margin-right: 1px;"></div>
                <div id="Sign_04" style="display: inline-block; text-align: left; width: 32%; margin-left: 2px;"></div>
            </div>
            <div id="Sign_05" style="margin-top: 2%; width: 65%; display: inline-table;"></div>

            <div id="Sign_09" class="MainWrapper" style="margin-top: 2%; width: 65%; display: inline-table;"></div>
            <div style="display:inline-flex; width: 89%;">
                <div id="Sign_07" class="MainWrapper" style="width:50%"></div>
                <div id="Sign_08" class="Mainwrapper" style="width: 50%; margin-top: 8px;"></div>
            </div>
            <div style="height: 28px; margin-top: 4%">
                <div id="Sign_06" class="MainWrapper" style="margin-top: 4%;"></div>
            </div>

        </div>
    </div>

Even though there is already an answer here, I'll still ask what you've tried already on your own to render any of the array you've shared, and to describe what that the issue is, if there is one. stackoverflow.com/help/minimal-reproducible-example — Drew Reese
– Drew Reese, Commented Aug 9, 2021 at 5:15

Anil Kumar · Accepted Answer · 2021-08-09 06:14:56Z

3

You should use map function and dangerouslySetInnerHTML for the content part:

import DOMPurify from 'dompurify';

return (
  arr.map((item, index) => (
  <div key={item.idappcontent}>
    <div>
      {item.idappcontent}
    </div>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.content) }}/>
  </div>
  ))
)

edited Aug 9, 2021 at 6:14

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

answered Aug 9, 2021 at 5:11

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

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

8 Comments

Anil Kumar Over a year ago

You can use DOMPurify.sanitize(content) before setting it in dangerouslySetInnerHTML to avoid XSS attack. It will make this solution a perfect solution.

Sidath Over a year ago

could you please add a sample code? I'm new to react.

Rakib Over a year ago

I have implemented the solution, please check here: stackblitz.com/edit/react-ec9c8v?file=src/App.js

Drew Reese Over a year ago

@AnilKumar Good habit to be in, but if OP is getting injection attacks from their own APIs then I would assume a more egregious compromise has already occurred. That's pretty much game over. 😆

Anil Kumar Over a year ago

@DrewReese I agree with your point but in every enterprise apps these issues are highlighted in pen testing/Fortify irrespective of being own API. We cannot predict which layer will compromised. Response can be intercepted via tools such as fiddler etc and response can be modified with script tags to redirect user to third party page.

|

Collectives™ on Stack Overflow

How to display data with div tag inside an array in react js?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related