0

I'm using this (below Redirect from react-router-dom) to move from my Edit component to Profile component after updating some user info.

Example:-
<Redirect
      to={{
      pathname: `/user/${id}`,
      state: { message: 'Profile updated!' }
      }}
   />

As soon as my Profile component mounts i do this

toast.configure();
    if (this.props.location.state !== undefined) {
      toast.success(this.props.location.state.message, {
        position: toast.POSITION.BOTTOM_LEFT
      });
      this.props.location.state = undefined;
    } else {
      toast.success('');
    }

But the problem is, even if the this.props.location.state.message is undefined, as its showing in the React Dev tools, the toast still pops up every time i refresh the page with the message "Profile updated!" enter image description here

i had to do this part

...this.props.location.state = undefined;
    } else {
      toast.success('');
    }

to make it work somehow. Still no luck. Please help.

SunoKuni
  • 37
  • 6
  • The `props` of a react component is aimed to store values and functions from its parent component. It's just the pattern, props are immutable. If you want to have a variable that would be mutable, then store it in the state of the component. You should use `setState` to update your state. – lakshman.pasala Mar 27 '20 at 17:49
  • Could you show me how to set the state from props (as shown above), I'm new to react and whatever i try leads to disaster. Also i'm using a class based component, so could you show me how to destructure props in class based components. – SunoKuni Mar 28 '20 at 06:12
  • Never mind, i destructured the props and successfully extracted the message and set the state, but do you have any idea on how to display the toast only once, only when the profile is updated and while redirecting from one component to another? – SunoKuni Mar 28 '20 at 06:35

0 Answers0