how to prevent two same useState hooks from being triggered on one click event

Question

I have 2 components with similar logic, they both conditionally display a message, based on the local state from useState hook and two props from the redux state. However, the problem occurs when I click on the ConnectedPasswordChange button - I see two messages, one from its own component and one from ProfileForm. Any idea how to get rid of that? Does it have something to do with event bubbling?

const ConnectedPasswordChange = (): Node => {
  const [submitted, setSubmitted] = useState(false);

  const isUpdating = useSelector(state => state.user.isUpdating);
  const updateError = useSelector(state => state.user.updateError);

  const handleSubmit = () => {
    const { currentPassword, newPassword } = passwordDetails;
    dispatch(passwordUpdateRequested(currentPassword, newPassword));
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };

  return (
    
      
      
        Button
      
      {submitted && !isUpdating && !updateError && }
    
  );
};

ConnectedPasswordChange is used in ProfileForm component that is using the same logic

const ProfileForm = ({ id, user: initialUser, locations, isUpdating, updateError, onSubmit }: Props): Node => {

  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    onSubmit(id);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };

  return (
    
      
      <Divider />
      <Form onSubmit={handleSubmit}>
        <PersonalDetails personalDetails={user} onPersonalDetailsChange={handleDetailsChange} />
        <Divider />
        <BankDetails bankDetails={user} onBankDetailsChange={handleDetailsChange} />
        <div style={{ textAlign: "center" }}>
          <Form.Button secondary>Button</Form.Button>
        </div>
        {submitted && !isUpdating && !updateError && <Message positive content={t("updateSucceeded")} />}
        <Divider />
        <ConnectedPasswordChange />
      </Form>
    </Segment>
  );
};
</code></pre>

user_1541563 · Answer

It's not typical to nest forms, so yes it appears if you submit an inner form, it also bubbles and triggers a submit event on the outer form component as well. To prevent this you can use Event.prototype.stopPropagation():

const ProfileForm = () => {
  const tableRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    tableRef.current.insertRow().append('ProfileForm submitted');
  };
  
  return (
    
      
        ProfileForm
        
        
        
  );
};

const ConnectedPasswordChange = () => {
  const tableRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    e.stopPropagation(); // important! without this, ProfileForm will submit as well
    tableRef.current.insertRow().append('ConnectedPasswordChange submitted');
  };
  
  return (
    
        ConnectedPasswordChange
        
        

      
    
      
  );
};

ReactDOM.render(, document.querySelector('main'));








Note that the resulting HTML is not valid, as  elements are not allowed to contain other  elements. If you try to statically render this HTML using a server-side React framework like Next.js you may find that the document may not end up as you expect:



// the inner  was stripped from the markup
console.log(document.getElementById('ConnectedPasswordChange'));
console.log(document.querySelector('main').outerHTML);

  
    
      ProfileForm
      
        
          ConnectedPasswordChange

how to prevent two same useState hooks from being triggered on one click event

1 Answers