Redirect with "componentDidMount()" : problem (React)

Question

I have some code that works. It immediately reroutes a user from the /test page to the FinishedPaying page. It is as so:

class Test extends Component {
  renderRedirect = () => {
      return <Redirect to="/FinishedPaying" />;
  };
  componentDidMount() {
    this.renderRedirect();
  }
...

The following code is meant to send a Paypal transaction, then route the user to the /FinishedPaying page. All of the other logic is working as expected:

export default class Pay extends React.Component {
  state = {
    userInput: ""
  };
  renderRedirect = () => {
      return (
        <Redirect
          to="/FinishedPaying"
          userInput={this.state.userInput}
        />
      );
  };
  componentDidMount() {
    this.setState({ userInput: this.props.userInput });
    this.renderRedirect();
  }

  render() {
    const onSuccess = payment => {
      axios
        .post(
          "http://amazonaws.com:3000/ethhash",
          {
            userInput: this.props.userInput,
          }
        )

        .then(response => console.log(response.data, payment))

        .catch(function(error) {
          console.log(error);
        });
    };

    return (
      <div>
        <PaypalExpressBtn
          onSuccess={onSuccess}
        />
      </div>
    );
  }
}

Not sure why the second code block is working. It is my understanding that this.renderRedirect() should fire after all of the other logic has happened. It does not seem to be firing at all. Any feedback is appreciated :)

Solution 1

you can put it in your render like:

render() {
    if (this.state.redirect){
        return <Redirect
            to="/FinishedPaying"
            userInput={this.state.userInput}
            />;
    }
    const onSuccess = payment => {...}

As soon as you change your redirect value in state for true you will be redirected.

Solution 2

You can't return the component <Redirect to="/FinishedPaying" /> in componentDidMount, you can only do that in render().

You could have a flag that sets to true when you're ready to redirect:

componentDidMount() {
  this.setState({
    userInput: this.props.userInput,
    readyToRedirect: true
  });
}

Then in your render method:

render() {
  this.state.readyToRedirect
    ? <Redirect to="/FinishedPaying" />
    : other stuffs...

or in my opinion, a more readable way:

render() {
  if (this.state.readyToRedirect) return <Redirect to="/FinishedPaying" />

  return (
    // rest of the code
  )

---

I also wouldn't define onSuccess function inside render, every state change will trigger render and re-define the function again and again.

If it doesn't require anything from this, you can even put it outside of the class

const onSuccess = payment => {
  ...
}

export default class Pay extends React.Component {
  ...
}

Solution 3

export default class Pay extends React.Component {

 state = {
  redirect: false
 };

renderRedirect = () => {
  if(this.state.redirect){
   return (
     <Redirect
       to="/FinishedPaying"
       userInput={this.props.userInput}
     />
    );
  }
};

componentDidMount() {
  this.setState({ redirect: true });
}

render() {
const onSuccess = payment => {
  axios
    .post(
      "http://amazonaws.com:3000/ethhash",
      {
        userInput: this.props.userInput,
      }
    )

    .then(response => console.log(response.data, payment))

    .catch(function(error) {
      console.log(error);
    });
};

 return (
   <div>
    {this.renderRedirect()}
    <PaypalExpressBtn
      onSuccess={onSuccess}
    />
   </div>
  );
 }
}

Comments

[Michael Freidgeim]

Possible duplicate of What component lifecycle to use to do something before render()?

[Hanley Soilsmith]

Thank you. This solution works but it bypasses the Paypal logic, which is a necessary component of the page.

[Hanley Soilsmith]

Thank you, this works renders correctly, but executes before the Paypal logic. If I put it after the Paypal logic, Paypal executes but the page does not redirect.

[Sergey Pugach]

Just change redirect value state when your Paypal logic done. you can do with this.setState({'redirect': true})

[Hanley Soilsmith]

Thank you very much for your help. These solutions work, in that they render correctly, but only if they are put above the Paypal logic (thus not running that logic.

[Hanley Soilsmith]

The answer is to set the flag to true after the Paypal logic runs. Thanks :)