How to get multiple checkbox values on submit reactjs

Question

I have a multiple recepient email and multiple checkbox column

I want to get each recepient email and checkbox values on submit.I am getting recepient emails on submit but no checkbox values. Kindly help

The form looks like this.

Here is my code

   export default function ShareReportView(props) {  
    const [recipientEmails, updateRecicpientEmails] = useState({});
    
    const handleInputChange = (e, name) => {
        updateRecicpientEmails((prevState) => ({
          ...prevState,
          [name]: e.target.value,
        }));
      };

    const extratEmailList = (emailsList) => {
        if (!emailsList || !Object.keys(emailsList).length) {
          return;
        }
        console.log('obj email list',Object.values(emailsList))
        return Object.values(emailsList);
      };
     
     const handlepermission = () => {
       
      };

   function sendEmail(recipientEmailsList) { 
      const rEmails = extratEmailList(recipientEmailsList);
      console.log(rEmails);#prints all emails here
      #here i want to get all checkbox values here on submit
     }    
    
  return (
    <div className="container">
                      {[...Array(count)].map((val, index) => (
                        <div key={index} className={`${styles["textField"]}`}>
                          <div style={{ float: "left" }}>
                            <Box
                              component="form"
                              sx={{
                                "& > :not(style)": { marginRight: 4, width: "31ch" },
                              }}
                              noValidate
                              autoComplete="off"
                            >
                              {" "}
                              <FormControl variant="standard">
                                <InputLabel
                                  htmlFor="component-simple">
                                  Recipient E mail
                                </InputLabel>
                                <Input
                                id="component-simple"
                                onChange={(event) =>
                                  handleInputChange(
                                    event,
                                    `recipient_email_${index++}`,
                                    false
                                  )
                                }
                                name={`recipient_email_${index++}`}
                                key={`recipient_email_${index++}`}
                                disableUnderline={true}
                              />
                              </FormControl>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    color="default"
                                    onClick={() => {
                                      handlepermission(`${index++}`);
                                    }}
                                  />
                                }
                               
                                label="Allow user to perfrom action"
                                name={`allow_user_edit_${index++}`}
                              />
                            </Box>
                          </div>
                        </div>
                      ))}
                       <div className="btn">
                        <button
                          className={`${styles.send}`}
                          onClick={() => sendEmail(recipientEmails)}
                        >
                          SEND
                        </button>
                      </div>
                 </div>
                 )}

Answer 1

You need to save multiple values on the same object per recipient, I did this change on your handleInputChange function, now it creates an object per recipient

const handleInputChange = (e, name) => {
    updateRecicpientEmails((prevState) => ({
      ...prevState,
      [name]: {
        email: e.target.value
      }
    }));
  };

and I call it like this

handleInputChange(event, `recipient_${index}`, false)

removed _email from there.

And for the handle permission, just add a new property to the recipient object with the checkbox value

const handlepermission = (index, value) => {
    updateRecicpientEmails((currentRecipients) => ({
      ...currentRecipients,
      [index]: {
        ...currentRecipients[index],
        allow: value
      }
    }));
  };

this function runs on input change, so just add this to prop to the input:

onChange={({ target: { checked } }) => {
  handlepermission(`recipient_${index}`, checked);
}}

To be honest is easier if you use the native form submit handler and FormData API, here is an example:

https://codesandbox.io/s/formdata-api-example-xkvi8

Answer 2

I am not on my computer but following should work

    export default function ShareReportView(props) {  
    const [recipientEmails, updateRecicpientEmails] = useState([]);
    
    const handleEmailChange = (e, index) => {
        let temp = [...recipientEmails]
        let tempObj = {...temp[index]}
        tempObj.email = e.target.value
        temp.splice(index, 1, tempObj)
        updateRecicpientEmails(temp)
      };
    const handlePermissionChange = (e, index) => {
        let temp = [...recipientEmails]
        let tempObj = {...temp[index]}
        tempObj.permission = e.target.value
        temp.splice(index, 1, tempObj)
        updateRecicpientEmails(temp)
      };

   function sendEmail(recipientEmailsList) { 
       recipientEmails.forEach(e => {
           console.log(e.email, e.permission)
       })
     }    
    
  return (
    <div className="container">
                      {[...Array(count)].map((val, index) => (
                        <div key={index} className={`${styles["textField"]}`}>
                          <div style={{ float: "left" }}>
                            <Box
                              component="form"
                              sx={{
                                "& > :not(style)": { marginRight: 4, width: "31ch" },
                              }}
                              noValidate
                              autoComplete="off"
                            >
                              {" "}
                              <FormControl variant="standard">
                                <InputLabel
                                  htmlFor="component-simple">
                                  Recipient E mail
                                </InputLabel>
                                <Input
                                id="component-simple"
                                onChange={(event) =>
                                    handleEmailChange(
                                    event,
                                    index
                                  )
                                }
                                name={`recipient_email_${index++}`}
                                key={`recipient_email_${index++}`}
                                disableUnderline={true}
                              />
                              </FormControl>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    color="default"
                                    onClick={(e) => {
                                        handlePermissionChange(e, index);
                                    }}
                                  />
                                }
                               
                                label="Allow user to perfrom action"
                                name={`allow_user_edit_${index++}`}
                              />
                            </Box>
                          </div>
                        </div>
                      ))}
                       <div className="btn">
                        <button
                          className={`${styles.send}`}
                          onClick={() => sendEmail(recipientEmails)}
                        >
                          SEND
                        </button>
                      </div>
                 </div>
                 )}

Let me know if you feel any issues, will be happy to help you, you should also change the logic of add and remove entries button. On add button just add a new object with empty values in recipientEmails list. and use your map function in render on recipientEmails.

Edit # 1

function addNewEntry(){ //call this on add new entry button
        let temp = [...recipientEmails]
        temp.push({
            email: '',
            permission: false
        })
        updateRecicpientEmails(temp)
     }

you can use addNewEntry for adding new row. but now your will have to edit your render function something like this

replace {[...Array(count)].map((val, index) => (

with {recipientEmails.map((val, index) => (

in your return staement