How to get multiple checkbox values on submit reactjs - 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

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

Answer 2

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