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

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 :)

Answer 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.

Answer 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 {
...
}

Answer 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>
);
}
}