I am trying to create a basic login. but the following code is not working

Question

setState is not updating the value of isCurrectLogin.

import React, { Component } from 'react';
import UserRecords from './UserRecords.json'

the json file has following records:

[
    {
        "id" : 1,
        "userName" : "Bala",
        "password" : "123"
    },
    {
        "id" : 1,
        "userName" : "John",
        "password" : "456"
    },
    {
        "id" : 1,
        "userName" : "Ram",
        "password" : "789"
    },
    {
        "id" : 1,
        "userName" : "Peter",
        "password" : "1011"
    }
]

And i extract class component.

export default class UserLogin extends Component {


constructor(){
    super();

    this.state = {
      currentUser : "",
      currentPassword : "",
      isCurrectLogin : false,
    }
}

loginClickHandler = () => {
  UserRecords.map((d)=>{
    for(var i = 0; i < UserRecords.length; i++){

      if(UserRecords[i].userName == "Bala"){
        this.setState({isCurrectLogin : true})
      } else {
        this.setState({isCurrectLogin : false})
      }
    }

  })


  if (this.state.isCurrectLogin) {
    alert("user name is correct")
  } else {
    alert("User name is wrong")
  }

 }

render(){
    return(
        <div>
          <Button onClick = {this.loginClickHandler}> Login  </Button>
        </div>
    )
  }
}

Please help me where I the code I missed.

Thank you very much.

Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — Juanes30, Nov 22 '19 at 02:34

score 0 · Answer 1 · answered Nov 22 '19 at 06:19

0

The map() method creates a new array with the results of calling a function for every array element.

 loginClickHandler = () => {   UserRecords.map((value,index)=>{

       if(UserRecords[index].userName == "Bala"){
         this.setState({isCurrectLogin : true})
       } else {
         this.setState({isCurrectLogin : false})

     }

   })

This should work fine.

answered Nov 22 '19 at 06:19

Ayushi Keshri

680
7
18

Thank you Very much Ayushi Keshri. Unnecessary I used for loop. Now I understand how to use index for looping. Thanks a lot :) – Govintharajah Janagan Nov 22 '19 at 13:24

score 0 · Answer 2 · answered Nov 22 '19 at 06:50

Please check this will work for you

const UserRecords = [
    {
        "id" : 1,
        "userName" : "Bala",
        "password" : "123"
    },
    {
        "id" : 1,
        "userName" : "John",
        "password" : "456"
    },
    {
        "id" : 1,
        "userName" : "Ram",
        "password" : "789"
    },
    {
        "id" : 1,
        "userName" : "Peter",
        "password" : "1011"
    }
]
let isCurrectLogin = false
loginClickHandler = () => {
      const username = "Peter"
      isCurrectLogin = UserRecords.filter(element => {
        if (element.userName === username) {
          return true
        }else{
          return false
        }
      });

  if (isCurrectLogin) {
    alert("user name is correct")
  } else {
    alert("User name is wrong")
  }
}

loginClickHandler()

@GovintharajahJanagan your most welcome, If my answer works for you then please accept my answer and please do vote for same — Sachin Dane, Nov 23 '19 at 18:47

I am trying to create a basic login. but the following code is not working

2 Answers2