How to render array data one by one inside div tag 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 one by one inside the div tag.

My data set is like below.

qtemp3: [
  {
    idappcontent: "Sign_01",
    content:
      '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
  },
  {
    idappcontent: "Sign_02",
    content:
      "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
  },
  {
    idappcontent: "Sign_03",
    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()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
  },
  {
    idappcontent: "Sign_04",
    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:100%;text-transform: capitalize;" /></div>',
  },
  {
    idappcontent: "Sign_05",
    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="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
  },
  {
    idappcontent: "Sign_06",
    content:
      '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
  },
],

Now I need to render this array inside the div tag.

My div tag codes are 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>

How to display array data one by one inside this div tags?

dude explain more also which part of div you want to display? — user13423237
– user13423237, Commented Aug 9, 2021 at 9:24
There is a id like" idappcontent: "Sign_01", data in the array. I need to display them in <div class="Header-banner" style="text-align: center;" id="Sign_01"></div> — Sidath
– Sidath, Commented Aug 9, 2021 at 9:32
Likewise need to display the data in the correct idappconten. — Sidath
– Sidath, Commented Aug 9, 2021 at 9:33

Ahmad · Accepted Answer · 2021-08-09 11:12:44Z

1

You should use map

qtemp3.map(item=>{
document.getElementById(item.idappcontent).innerHTML=item.content
});

Here is the sample:

const qtemp3= [
  {
    idappcontent: "Sign_01",
    content:
      '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
  },
  {
    idappcontent: "Sign_02",
    content:
      "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
  },
  {
    idappcontent: "Sign_03",
    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()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
  },
  {
    idappcontent: "Sign_04",
    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:100%;text-transform: capitalize;" /></div>',
  },
  {
    idappcontent: "Sign_05",
    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="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
  },
  {
    idappcontent: "Sign_06",
    content:
      '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
  },
];

qtemp3.map(item=>{
document.getElementById(item.idappcontent).innerHTML=item.content
});

<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>

and here is react js sample:

React Sample

edited Aug 9, 2021 at 11:12

answered Aug 9, 2021 at 9:37

Ahmad

9042 gold badges9 silver badges15 bronze badges

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

11 Comments

user13423237 Over a year ago

i was gonna do that but idk what hes trying to loop

user13423237 Over a year ago

BTW SAME POINTS

Sidath Over a year ago

@Ahmad Rahmani, Where should I place this code line -> qtemp3.map(item=>{ document.getElementById(item.idappcontent).innerHTML=item.content });

Sidath Over a year ago

Please help me. I am new to react

Sidath Over a year ago

@Ahmad Rahmani Please help to fix my code with your answer. I don't have good knowledge of react js. Please add Full React code. I'm trying adding your code in some places. but it gives me an error.

|

score 0 · Accepted Answer · 2021-08-09 09:39:07Z

I dont really understand your code but your data should look like this:

const qtemp3 = [
  {
   idappcontent: "Sign_01",
   content: '#FOLDERPATH#v-club.png'
  },
]

and your gonna display it:

<p>{qtemp3.idappcontent}</p>
<img id="vClub_logo" src={qtemp3.content} style="width:600px;height: 150px;" />,

if you want to learn more about it check this website:

https://scotch.io/courses/10-react-challenges-beginner/display-simple-data-with-jsx

dont do the challenges just check the answers and they explain it well

FULL CODE:

    {data.map((item) => (

<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>

    )}

illia chill · Accepted Answer · 2021-08-09 09:40:09Z

0

If you want to just show n elements with same style it's with .map

<div>
{qtemp3.map(item => (
//component you like to show n times, item is your variable for each element
{item.component}
))}
</div>

answered Aug 9, 2021 at 9:40

illia chill

2,07611 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to render array data one by one inside div tag in react js?

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related