Converting class based component to function based component fails

Question

I am switching from class-based component to function-based components, but my code works in class-based component and doesn't work in the function-based component.

Here is the code:

import { connect } from "react-redux";
import * as actions from "../redux/actions/authActions";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }

  authenticate() {
    this.props.auth(this.state.email, this.state.password).then((response) => {
      if (this.props.authenticated) {
        alert("User Is Authenticated");
      } else {
        alert("User Isn't Authenticated");
      }
    });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TextInput
          autoCapitalize="none"
          keyboardType="email-address"
          style={// styles here}
          placeholder="Enter email"
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
        />
        <TextInput
          autoCapitalize="none"
          secureTextEntry
          style={// styles here}
          placeholder="Enter password"
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
        />
        <TouchableOpacity onPress={() => this.authenticate()}>
          <Text style={{ marginTop: 20, color: "black", textAlign: "center" }}>
            Login
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn,
  isLoading: state.auth.isLoading,
  userData: state.auth.userData,
  error: state.auth.error,
  authenticated: state.auth.isAuthenticated,
  mainState: state,
});

const mapDispatchToProps = (dispatch) => ({
  auth: (email, password) => dispatch(actions.loginUser({ email, password })),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Converted code to function based component

import { connect } from "react-redux";
import * as actions from "../redux/actions/authActions";

function Login({ auth, authenticated }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const authenticate = () => {
    auth(email, password).then((response) => {
      if (authenticated) {
        alert("User Is Authenticated");
      } else {
        alert("User Isn't Authenticated");
      }
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <TextInput
        autoCapitalize="none"
        keyboardType="email-address"
        style={ // styles here}
        placeholder="Enter email"
        value={email}
        onChangeText={(text) => setEmail(text)}
      />
      <TextInput
        autoCapitalize="none"
        secureTextEntry
        style={ // styles here}
        placeholder="Enter password"
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <TouchableOpacity onPress={() => authenticate()}>
        <Text style={{ marginTop: 20, color: "black", textAlign: "center" }}>
          Login
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn,
  isLoading: state.auth.isLoading,
  userData: state.auth.userData,
  error: state.auth.error,
  authenticated: state.auth.isAuthenticated,
  mainState: state,
});

const mapDispatchToProps = (dispatch) => ({
  auth: (email, password) => dispatch(actions.loginUser({ email, password })),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Here at the Login function. App state isn't updated at the first time, but it gets updated in subsequent attempts.

Thank you for reading and helping.

on 2nd click of login button, it works but not on first one? — sid
– sid, Commented Jul 23, 2021 at 8:08
in function component button works on both first & second click, but at first click even though I see response from server that props.authenticated is true it always shows false at first time. — Mir Stephen
– Mir Stephen, Commented Jul 23, 2021 at 8:12
The code works in class based component but doesn't work in function based component. — Mir Stephen
– Mir Stephen, Commented Jul 23, 2021 at 8:17

Drew Reese · Accepted Answer · 2021-07-23 08:43:55Z

2

You've closed over stale state from the render cycle that authenticate was invoked in. React state updates are asynchronous, so if you want to handle state after an update you need to do so in the next render cycle, likely in an useEffect hook (synonymous to the class-based component's componentDidUpdate method). When the authenticated redux state value updates then the component is rerendered.

useEffect(() => {
  if (authenticated) {
    alert("User Is Authenticated");
  } else {
    alert("User Isn't Authenticated");
  }
}, [authenticated]);

authenticate() {
  auth(email, password)
    .then((response) => {
      console.log(response);      
    });
}

Update

This useEffect callback will display one alert or the other, each render. You can add state to make it wait until you've submitted an auth request AND have been authenticated.

const [isAuthenticating, setIsAuthenticating] = useState(false);
const [finishedAuth, setFinishedAuth] = useState(false);

useEffect(() => {
  if (isAuthenticating && finishedAuth) {
    alert(authenticated
      ? "User Is Authenticated"
      : "User Isn't Authenticated"
    );
  }
}, [isAuthenticating, finishedAuth, authenticated]);

authenticate() {
  setIsAuthenticating(true);
  auth(email, password)
    .then((response) => {
      console.log(response);
    })
    .finally(() => setFinishedAuth(true));
}

These two additional state might be great candidates to instead store in your redux state, BTW.

edited Jul 23, 2021 at 8:43

answered Jul 23, 2021 at 8:18

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mir Stephen Over a year ago

Thank you, seems I am close, but here when I go to login screen it instantly pop up the above alert "User isn't authenticated". Even though, I haven't typed anything in email & password field and didn't submit the form.

Mir Stephen Over a year ago

Now it works as expected, thank you very much. How do I solve that initial pop up.

Drew Reese Over a year ago

@NoorNoori You can add additional conditions, such as don't invoke on the initial render, or checking that email and password are truthy, or probably just add additional state that you trigger when authenticating, i.e. "submitted auth request" and "became authenticated".

Mir Stephen Over a year ago

can you please update the answer, why it is showing that default pop up? thanks for helping

sid Over a year ago

hi @DrewReese, I tried to create a similar app and I don't seem to face any such error. I get the values on the first click directly. could you please help me to understand your answer and why is it that my app runs fine on first click also? thanks. codesandbox.io/s/red-cdn-eg66n?file=/src/App.js

|

Collectives™ on Stack Overflow

Converting class based component to function based component fails

1 Answer 1

Update

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related