I need to update state in render() function in reactjs. How? - reactjs

Question

What are the solutions for this problem?
<Form.Field>
<label> </label>
<MockMutation mutation={DO_LOGIN}>
{(doLogin, { loading, error, data }) => {
if (!loading && data.loggedInState == "LOGGED_IN") {
// this.setState({goodLogin: true})
// I need to update state here to redirect to other page
// How can I do it with out the annoying warning???
}
return (
<Button
primary
className="login-btn full-width"
disabled={loading}
onClick={e => {
console.log("on click btn clicked");
e.preventDefault();
doLogin({
variables: {
employeeId: this.state.employeeId,
password: this.state.password
}
});
}}
>
<span style={loading ? { display: "none" } : {}}>Login</span>
<span style={loading ? {} : { display: "none" }}>Loading...</span>
</Button>
);
}}
</MockMutation>
</Form.Field>

Answer 1

If you are using react-router.v4 you can use Redirect component to do make a redirect.
if (!loading && data.loggedInState == "LOGGED_IN") {
// this.setState({goodLogin: true})
// I need to update state here to redirect to other page
// How can I do it with out the annoying warning???
return <Redirect to="/some/path" />
}
If you don't use react-router-4 then it is fairly easy to implement such component anyway:
class Redirect extends React.Component {
componentDidMount(){
const { history, to } = this.props;
history.push(to);
}
render() {
return null
}
}
export default withRouter(Redirect);