lundi 26 juin 2017

React - How to check/uncheck checkboxes in a loop whose values come from redux store

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&nbsp;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