CODEWITHSUNDEEP
arraysreactjs
Sidath
Sidath

Reputation: 447

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

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?

Upvotes: 0

Views: 748

Answers (3)

Ahmad
Ahmad

Reputation: 884

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

Upvotes: 1

illia chill
illia chill

Reputation: 2056

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>

Upvotes: 0

user13423237
user13423237

Reputation:

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>

    )}

Upvotes: 0

Related Questions