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

Question

What are the solutions for this problem?

<Form.Field>
  <label>&nbsp;</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>

you cannot - you need to do it else where try looking at docs for life-cycle methods - specifically component will receive props — developer, May 21 '18 at 15:53

score 1 · Answer 1 · answered May 21 '18 at 16:00

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

answered May 21 '18 at 16:00

Tomasz Mularczyk

34,501
19
112
166

If at all this question is entirely related with Redirecting, you could have simply marked it as a duplicate of https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 or https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router . – Shubham Khatri May 21 '18 at 16:03
I rendered a fake component this works with no warning. I think it is exactly what does. Thank you! – Nicolas S.Xu May 21 '18 at 17:18

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

1 Answers1