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

Question

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 (
            
                
                    
                        {row.email}
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                

            
        )
    })

    return emailTemplate

}
render() {
    return (

        
            
                Notification Settings
                
                        {this.getEmailUserRows()}

                    
                    
                        
                            Email ID
                            Transactional
Emails
                            Settlement
Emails
                            CRM
Emails
                            Onboarding
Emails
                            Other
Emails
                            Action
                        
                


                

                

            
        

    )
}
}

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.

EDIT:

Made changes as suggested:

`import React from 'react';


let NotificationSettingRow = (props) => {
  let { emailRowData } = props

  const toggleCheckbox = () => {
   console.log("Yay")
  }


  return (
     
                
                    
                        {emailRowData.email}
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                
                
                    
                

            
  )
}


export default NotificationSettingRow`

However i am unable to check/uncheck checkboxes. Please help

Davorin Ruševljan · Accepted Answer

Look at he last line in input, it basically evaluates if email in current row is in particular category, and if yes it renders checked=true, otherwise renders nothing

While you are at it you could define your component that would be used like:

to avoid typing pretty much the same code for each email category.

Now how to handle checking and unchecking by the user. You need action that will be fired by the onClick for each checkbox. Something along these lines:

const emailCategoryClick = (email, category) => ({
  type: 'EMAIL_CATEGORY_CLICK',
  email,
  category
})

And you need suitable reducer to recognize this action, and update state accordingly.

Lastly, you need to wire your checkboxes to dispatch correct emailCategoryClick actions. To do so, you should connect your component to get access to dispatch method from store. Something like:

export default connect(
 (state) => ({}),
 (dispatch) => ({catClick: (email, cat) => () => {dispatch(emailCategoryClick(email, cat))} })
)(NotificationSettings)

and in your checkbox you would add onClick handler as in:

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

Answers (1)

Related Questions