React Link async/await does not wait code block

Question

Hey I am trying to make small application for React-router I am trying to send API request (I do not have backend thats why im using promises) When i click Link it is redirecting not waiting my async/await could you tell me what am i doing wrong? First thought i can pass history with props and then

history.push("/someURL");

But my second thought is if i could do this with <Link I will pass less props (history).

To sum up i need to wait until my request(promise) over after that i need to change url

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';

const StyledButton = styled.button`
  width: 100%;
  border-radius: 10px;
  background-color: #24b571;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 5px;
`;

const SaveButton = ({
  children,
  saveValidation,
  message,
  to,
  setIsLoading,
}) => {
  const promiseFunc = () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(5);
      }, 5000);
    });

  const onClickHandler = async (event) => {
    setIsLoading(true);
    const control = saveValidation(); // returns true or false
    if (!control) {
      toast.error(message);
      event.preventDefault();
    } else {
      try {
        const a = await promiseFunc();
        alert(a);
      } catch {
        alert('error');
      }
      console.log(control);
    }
    setIsLoading(false);
  };

  return (
    <Link to={to}>
      <StyledButton onClick={onClickHandler}>{children}</StyledButton>
    </Link>
  );
};

export default SaveButton;

SaveButton.propTypes = {
  children: PropTypes.node.isRequired,
  saveValidation: PropTypes.func.isRequired,
  to: PropTypes.string.isRequired,
  message: PropTypes.string,
  setIsLoading: PropTypes.func,
};
SaveButton.defaultProps = {
  message: 'Fill all values',
  setIsLoading: () => {},
};

For tags i could be wrong on javascript/html thats why i added javascript tag — Neo
– Neo, Commented Dec 5, 2021 at 18:48
Browser event handling does not understand async event handler functions. — Pointy
– Pointy, Commented Dec 5, 2021 at 18:49
@Pointy is there anything i can do like event.preventDefault(); and then "event.unpreventDefault();" — Neo
– Neo, Commented Dec 5, 2021 at 18:53
No, there is not. When your handler returns, the browser will ignore the return value and consider the event to be completed. — Pointy
– Pointy, Commented Dec 5, 2021 at 19:01
You could do the things suggested but the onClick needs to be on the Link, not the StyledButton as they are acting independently of one another (the Links redirects while the StyledButton runs the handler. — andyd_28
– andyd_28, Commented Dec 5, 2021 at 20:57

Drew Reese · Accepted Answer · 2021-12-06 18:51:06Z

Issue

The main issue here is that you are rendering TWO components/elements a user could interact with, which is generally considered anti-pattern in UI/UX. The button is clicked and its onClick handler is invoked, and the click event bubbles and the Link handles it by navigating. These events are handled separately from one another. You could stop the onClick event propagation in the button's click handler, but then the Link would stop working.

Solution

I suggest using the styled button alone and at the end of the asynchronous logic issue an imperative navigation instead of the declarative navigation offered by the Link. Use the useHistory hook from react-router-dom (or useNavigate if using RRDv6).

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom'; // <-- import hook
import { toast } from 'react-toastify';

const StyledButton = styled.button`
  ...
`;

const SaveButton = ({
  children,
  saveValidation,
  message,
  setIsLoading,
  to,
}) => {
  const history = useHistory(); // <-- use hook

  const promiseFunc = () => new Promise((resolve) => {
    ...
  });

  const onClickHandler = async (event) => {
    setIsLoading(true);
    const control = saveValidation();
    if (!control) {
      toast.error(message);
      event.preventDefault();
    } else {
      try {
        const a = await promiseFunc();
        alert(a);
      } catch {
        alert('error');
      }
      console.log(control);
    }
    setIsLoading(false);
    history.push(to); // <-- imperative navigation
  };

  return (
    <StyledButton onClick={onClickHandler}>{children}</StyledButton>
  );
};

Collectives™ on Stack Overflow

React Link async/await does not wait code block

1 Answer 1

Issue

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related