I want to create a login form with array data:

const users = [
  {
    username: 'admin1',
    password: '12345678'
  },
  {
    username:'admin2',
    password:'012345678'
  }
];

and Login.js looks something like this:

import React from 'react';

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

  changeInputValue(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  validationForm() {
    let returnData = {
      error : false,
      msg: ''
    }
    const {password} = this.state
    //Check password
    if(password.length < 8) {
      returnData = {
        error: true,
        msg: 'Password must be more than 8 characters'
      }
    }
    return returnData;
  }

  submitForm(e) {
    e.preventDefault();
    const validation = this.validationForm()
    var username = e.target.elements.username.value;
    var password = e.target.elements.password.value;
    if (validation.error) {
      alert(validation.msg)
    }else if(username === 'admin1' && password === '12345678') {
      alert("Login successful");
    }else {
      alert("Wrong password or username");
    }
  }
    
  render() {
    return (
      <div className="container" style={{ paddingTop: "5%" }}>
        <form
          onSubmit={e => {
            this.submitForm(e);
          }}
        >
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              name="username"
              placeholder="Username"
              onChange={e => this.changeInputValue(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="password"
              className="form-control"
              name="password"
              placeholder="Password"
              onChange={e => this.changeInputValue(e)}
              
            />
          </div>
          <button value="submit" className="btn btn-primary" onClick={this.postDetails}>
            Submit
          </button>
        </form>
      </div>
    
    );
  }
}

export default Login;

So the above code only check whether the username and password fields entered in the form match the name and password of single record in the array of objects of User.js the above code is working fine. I don't know how to check username and password from the passed array.

I want to use map () to check for username and password. Please show an instance of how it is done. Sorry, I'm new to ReactJS so I'm a bit confused, hope you can help. Thanks

CodePudding user response：

You can use find

const user = users.find(user => (user.username === username && user.password === password))
if(user){
 //correct user
}
if(!user) {
 //incorrect
}

CodePudding user response：

You can use .some() method.

doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Something like this

var username = e.target.elements.username.value;
var password = e.target.elements.password.value;

if(users.some((elem) => elem.username === username && elem.password === password)) {
 // when authentication is valid
} else {
 // not a valid username / password
}