I am creating a react app and getting all data from API calls. I have set data into an array and display them. And there is data coming with an input tag and there is a function inside the tag. How can I call that functions in react js?
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>',
},
],
This is what I tried;
import React, { Component } from "react";
export default class testPage3 extends Component {
state = {
surveyContent: [],
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>',
},
],
};
render() {
const { qtemp3} = this.state;
return qtemp3.map((item, index) => (
<div key={item.idappcontent}>
<div dangerouslySetInnerHTML={{ __html: item.content }} />
</div>
));
}
}
How to call these function in react js? onkeyup="FirstnameValidation()" , onkeyup="emailvalidation()" . Cant change the data set coming from API. I also post a question related to this -> Check this.
