Catch error and put inside a component ReactJS

Question

I have an issue, this issue is to take an error from my try catch and pass this message error to my custom alert component.

Below is my code:

 export const Register = () => { 
   const dispatch = useDispatch(); 
   
   const [openError, setOpenError] = useState(false);

   const AlertError = openError ? (
    <Dialog open={openError}>
      <AlertCard
        open={openError}
        handleClose={handleCloseError}
        borderTop="1vh solid red"
        color="black"
        severity="error"
        title="Cadastro falhou"
        description='message' //put here message error
      />
    </Dialog>
  ) : (
    ""
  );

 const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      first_name: "",
      last_name: "",
      confirmPassword: "",
      newsletter: "",
    },
    validationSchema: validationSchema,
    onSubmit: async (values) => {
      setIsLoading(true)
      dispatch(signupUserPending());
      dispatch(requestConfirmEmailPending());
      try {
        if (document.getElementById("checkbox").checked) {
          values.newsletter = "on";
        }
        const singUpRes = await signup(values);
        dispatch(signupUserSuccess(singUpRes));
        dispatch(getUserSuccess(singUpRes));
        dispatch(getTokenSuccess(singUpRes));

        const confirmEmailRes = await requestConfirmEmail(singUpRes.user.email);
        dispatch(requestConfirmEmailSuccess(confirmEmailRes));
        setOpenSuccess(true);
        navigate("/confirm-token");

      } catch (err) {
        console.log(err.message); //need take this message error
        dispatch(signupUserFailure(err));
        dispatch(requestConfirmEmailFailure(err));
        setIsLoading(false);
        setOpenError(true);
      }
    },
  });

  return ({AlertError}...rest of code)
}

I need to catch a message error which come from the backend, and put this error inside my props description on my custom alert error. But I don't know how to make this. I tried make this for some hours but could not achieve success.

user19183737 · Accepted Answer · 2022-05-24 20:43:15Z

1

In general, whenever you want to mutate local values to be rendered in a component, you would be updating the React state.

See, you are already using the useState hook for controlling whether the AlertError is showing or not with [openError, setOpenError], you should just need to do the same with the error message.

Additionally, you might want to use the error message itself to control the render of the Alert.

Here is a snippet of what I mean:

export const Register = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const formik = useFormik({
    onSubmit: async (values) => {
      try {
        await signup(values);
      } catch (err) {
        setErrorMessage(err.message);
      }
    },
  });
  return <AlertError open={!!errorMessage} description={errorMessage} />;
};

const AlertError = ({ open, description, ...rest }) => (
  <Dialog open={open}>
    <AlertCard open={open} description={description} {...rest} />
  </Dialog>
);

answered May 24, 2022 at 20:43

user19183737

Sign up to request clarification or add additional context in comments.

1 Comment

Arthur Prasniski Over a year ago

Hi Felipe thanks a lot for your explanation about this case, this help me a lot to solve my issue!

Collectives™ on Stack Overflow

Catch error and put inside a component ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related