score:0

when cancelling the modal by the button "cancel", you're basically updating the state of your modal component, you don't update the state of your home component. what you can do is that on "cancel" click you have a function, which does something like:

const oncancelmodal = () => {
  setmodal(false);
  props.toggle(false);
}

this way it's gonna work, here's a link for a complete code.

https://codesandbox.io/s/blissful-brown-io0dz?file=/src/register.tsx

hope this helps.

score:1

don't duplicate states. use the toggle value and callback in register component as you are already passing it.

working demo

code snippet

function register(props: any) {
  const [firstname, setfirstname] = usestate<string>("");

  // const [modal, setmodal] = usestate(props.modal); // no need of this
  //console.log(modal);

  const validatesignup = () => {
    if (firstname === "") {
      props.toggle(true);
    } else {
      props.toggle(false);
    }
  };
  return (
    <modal isopen={props.modal} toggle={props.toggle}>
      <modalheader>sign up</modalheader>
      <modalbody>
        <formgroup>
          <label>first name</label>
          <input
            type="text"
            onchange={(e: any) => setfirstname(e.target.value)}
          />
        </formgroup>
      </modalbody>
      <modalfooter>
        <button color="success" onclick={validatesignup}>
          sign up
        </button>
        <button
          color="danger"
          onclick={() => {
            // setmodal(false); // not required
            props.toggle(false);
          }}
        >
          cancel
        </button>
      </modalfooter>
    </modal>
  );
}


Related Query

More Query from same tag