react: array "contains" method

Question

I have a react class component, which has in its state a parameter object of type "credentials" :

{ user: '' , password: '' }.

I add new "credentials" to a "credentialList" array also in the state and output it. I am trying to make the program give me an error when I try to enter a new "credentials" with a user that already exists in the list. I gave each "credentials" a key value equal to user. Unfortunately this has not worked. I marked the problematic if statement in ** **. Thanks to any helper. My code:

state = {
    user: '',
    password: '',
    clicked: false,
    credentialsList: []
}

userChangedHandler = (event) => {
    this.setState( { user: event.target.value })
}

passwordChangedHandler = (event) => {
    this.setState( { password: event.target.value })
}

userSubmitHandler = () => {
    if(this.state.user === '' || this.state.password === ''){
        alert('Please enter username and password!');
    }
    const credential = {user: this.state.user , password: this.state.password};
    **if(this.state.credentialsList.length !== 0 && this.state.credentialsList.contains(credential)){
        alert('Enter New')
    }**
    else {
        let newList = [...this.state.credentialsList, {user: this.state.user, password: this.state.password }];
        this.setState({clicked: true, user: '', password: '', credentialsList: newList})
    }
}

formEraseHandler = () => {
    if(this.state.credentialsList.length === 0){
        alert('The User List is Empty!')
    }
    else {
        let newList = [];
        this.setState({ credentialsList: newList, user:'', password:''});
    }
}

render() {
    return(
     <div>
        <Form
            credentialsList={this.state.credentialsList}
            user={this.state.user}
            password={this.state.password}
            clicked={this.state.clicked}
            userChanged={(event) => this.userChangedHandler(event)}
            passwordChanged={(event) => this.passwordChangedHandler(event)}
            addButtonClicked={this.userSubmitHandler}
            resetButtonClicked={this.formEraseHandler}/>
        <CredentialsList credentials={this.state.credentialsList}/>
     </div>
    )
}

}

Answer 1

There is no contains method but you can use some()

Here is an example:

const exists = this.state.credentialsList.some(v => (v.user === credential.user && v.password === credential.password));

The code above checks if any of the objects inside the credentialsList array has the same user and password properties values as the credential object. You can modify the if condition if you don't want to check for both these properties.

Answer 2

I think the method you are looking for is includes

This will compare the entire object with the one given in params. For example:

const credentials = [{ username: 'foo', password: 'bar' }];
credentials.includes({ username: 'foo, password: 'bar' }); // true
credentials.includes({ username: 'foo, password: 'foobar' }); // false

If you want to compare specific values then the some method is more appropriate

credentials.some(cred => cred.username === this.state.username); // true