React - Unable to uncheck the "check" checkbox

Question

I am blocked with unchecking the checkbox. there are two check fields sms and email i am able to check and uncheck checkbox for sms but for email field uncheck is not working Here is my code,

    const Notifications = ({
  editAlertState,
  setEditAlertState,
  handleNotifyByEmailSMS,
  handleNotifyByChange,
  name,
  userEmail,
  handleToggle,
  phoneNumber,
  placeId,
  errors,
  register,
}) => {
  const places = useSelector((state) => state.entities.places.data);
  const generateNotificationList = (editAlertState, name, places, placeId) => {
    let place = null;
    if (placeId) {
      place = places.filter((place) => place.id === placeId)[0];
    } else {
      place = places[0];
    }
    let options = editAlertState.editPlace
      ? [
          `When ${name} is located near ${place.name}`,
          `When ${name} is not located near ${place.name}`,
          "Always",
        ]
      : ["Always"];

    return options.map((e) => {
      return {
        key: e,
        value: e,
      };
    });
  };


    <div className={style.notify_wrapper}>
                <TmoH4 className={style.subheading}>How to notify me</TmoH4>
                <div className={style.checkbox}>
                  <input
                    type="checkbox"
                    checked={editAlertState.SMS}
                    id="text"
                    value="SMS"
                    name="notifyBy"
                    onChange={(e) =>
                      handleNotifyByEmailSMS(e, editAlertState, setEditAlertState)
                    }
                  />
                  <label htmlFor="text">
                    Text message {StringUtilities.formatPhoneNumber(phoneNumber)}
                  </label>
                </div>
                <div className={style.checkbox}>
                  <input
                    type="checkbox"
                    checked={editAlertState.email}
                    id="email"
                    value="EMAIL"
                    name="notifyBy"
                    onChange={(e) =>
                      handleNotifyByEmailSMS(e, editAlertState, setEditAlertState)
                    }
                  />
                  <label htmlFor="email">Email {userEmail}</label>
                </div>

i am not able to uncheck email checkbox. Can anyone please tell what exactly i am missing in this

Can you add the code of `handleNotifyByEmailSMS` method ? It would be easier to see what is happening when you update the state — gladix, Jun 10 '21 at 11:09
@yahyaparvar - editAlertState.SMS this is no defined anywhere — PratikshaKale, Jun 10 '21 at 11:19

score 0 · Accepted Answer · answered Jun 10 '21 at 11:49

Sending the props back to the parent component complicates things too much, the parent already has the props.

But to solve the problem with the current design, I think that in your parent component, handleNotifyByEmailSMS does not differentiate which box the user has clicked, you could use e.target.getAttribute('name') in your case to make this distinction and set editAlertState.SMS or editAlertState.email accordingly

See: Pass props to parent component in React.js and event.target.name is undefined

React - Unable to uncheck the "check" checkbox

1 Answers1