score:2

Accepted answer

when meteor.loginwithpassword changes your logginin value to true, your <public /> component unmounts your wrapped <loginform />

const public = ({ loggingin, authenticated, component, ...rest }) => (
  <route
    {...rest}
    render={(props) => {
      if (loggingin) return <div />; // <--- this right here
      return !authenticated ?
      (react.createelement(component, { ...props, loggingin, authenticated })) :
      (<redirect to="/" />);
    }}
  />
);

so loggingin values changes causing <public /> to re-render. now that loggingin is true, you render a div instead of the component that was, unmounting it and making setstateunavailable when the errors callback tries to invoke it.

edit: in response to your comment...

to prevent this you can handle the error display inside the <loginform />

  1. remove if (loggingin) return <div />; from your <route /> in your <public /> component.
  2. inside your <loginform /> you can handle the error condition. do this by making a component that displays your errors and include it in your <loginform /> component where you want it displayed. make the <errordisplay /> component return nothing if there are no errors.

example <errordisplay /> component

const errordisplay = ({ errors }) => {
    errors && <div classname="error-container">{ errors }</div>
};

that is obviously barebones, but i hope it helps you understand!


Related Query

More Query from same tag