score:2

Accepted answer

radio buttons are grouped by name attribute of input tags. in your code, you wrote name="true" or name="false" for input tags. those are wrong. so all of input tags who has name="true" are in one group and same as for the name="false".

please try the below code.

import react from 'react';

const notificationform = ({ text, slug, isnotification, handleupdate }) => {
  return (
    <>
      <h1>{text}</h1>
      <div htmlfor={1}>
        <label>
          <input
            id={1}
            type="radio"
            name={slug} // it must be uniqe for groups and same in one group
            value="true"
            checked={isnotification === true}
            onchange={(e) =>
              dispatch({
                type: 'fetch_is_notification_fulfilled',
                payload: e.currenttarget.value,
                slug,
              })
            }
          />
          notify me
        </label>
        <label htmlfor={2}>
          <input
            id={2}
            type="radio"
            name={slug} // it must be uniqe for groups and same in one group
            value="false"
            checked={isnotification === false}
            onchange={(e) =>
              dispatch({
                type: 'fetch_is_notification_fulfilled',
                payload: e.currenttarget.value,
                slug,
              })
            }
          />
          do not notify me.
        </label>
      </div>
    </>
  );
};

export default notificationform;

Related Query

More Query from same tag