I am trying to build a Notification settings via React and Redux where my against each email address I have few checkboxes say something in the below format.
import React from 'react'
export class NotificationSettings extends React.Component {
constructor(props) {
super(props);
this.getEmailUserRows = this.getEmailUserRows.bind(this)
}
getEmailUserRows() {
let _this = this
let emailRows = this.props.emailRows
let emailTemplate = emailRows.map((row) => {
return (
<tr key={row.email}>
<td height="70">
<span class="txt-limit">
<small>{row.email}</small>
</span>
</td>
<td class="no-spc" height="70">
<span class="pure-checkbox tog-check">
<input
id={row.email+"sttng1"}
name={row.email+"sttng1"}
type="checkbox"/>
<label for="sttng1"></label>
</span>
</td>
<td class="no-spc" height="70">
<span class="pure-checkbox tog-check">
<input
id={row.email+"sttng2"}
name={row.email+"sttng2"}
type="checkbox"/>
<label for="sttng2"></label>
</span>
</td>
<td class="no-spc" height="70">
<span class="pure-checkbox tog-check">
<input
id={row.email+"sttng3"}
name={row.email+"sttng3"}
type="checkbox"/>
<label for="sttng3"></label>
</span>
</td>
<td class="no-spc" height="70">
<span class="pure-checkbox tog-check">
<input
id={row.email+"sttng4"}
name={row.email+"sttng4"}
type="checkbox"/>
<label for="sttng4"></label>
</span>
</td>
<td class="no-spc" height="70">
<span class="pure-checkbox tog-check">
<input
id={row.email+"sttng5"}
name={row.email+"sttng5"}
type="checkbox"
/>
<label for="sttng5"></label>
</span>
</td>
<td class="no-spc" height="70">
<span class="icon-delete"></span>
</td>
</tr>
)
})
return emailTemplate
}
render() {
return (
<div class="accordian-container open">
<div class="webhook-dtl">
<h4>Notification Settings</h4>
<table
width="100%"
border="0"
cellSpacing="0"
cellPadding="0"
class="transaction-detail">
<tbody>
<tr class="tbl-hdng">
<td width="24%" height="52" align="left">Email ID</td>
<td width="19%" class="no-spc">Transactional<br/>Emails</td>
<td width="13%" class="no-spc">Settlement<br/>Emails</td>
<td width="12%" class="no-spc">CRM<br/>Emails</td>
<td width="12%" class="no-spc">Onboarding<br/>Emails</td>
<td width="10%" class="no-spc">Other<br/>Emails</td>
<td width="10%" class="no-spc">Action</td>
</tr>
{this.getEmailUserRows()}
</tbody>
</table><br/>
<br/>
<button class="cmn-btn right">ADD MORE</button>
</div>
</div>
)
}
}
export default NotificationSettings
My JSON that is stored in the redux store:
{
"status": 0,
"rows": 0,
"message": "Merchant Details returned successfully",
"result": [
{
"email": "dashboard2@yopmail.com",
"emailCategoryList": {
"crmEmails": true,
"settlementEmails": true,
"transactionalEmails": true,
"onboardingEmails": true,
"otherEmails": true
},
"isMerchantBusinessEmail": true
},
{
"email": "vinikaty@gmail.com",
"emailCategoryList": {
"crmEmails": true,
"settlementEmails": false,
"transactionalEmails": false,
"onboardingEmails": true,
"otherEmails": true
},
"isMerchantBusinessEmail": false
}
],
"errorCode": null,
"guid": null
}
Pleae help me check/uncheck checkboxes in React not able to figure out what would be the best approach.
Aucun commentaire:
Enregistrer un commentaire