React native, how to check arrays are equal or not - arrays

Question

I have created pin code lock screen using react native.
you can see the code with emulator here - https://snack.expo.dev/#codewithbanchi/pincode
default pin is 1234 and it is assigned to an array.
Then I take the inputs from user and assign it to an another array.
Then I wrote this for checking if the user entered pin is equal to the default pin.
if(passcode===defaultCode){
alert("Login sucssesfull");
}else{
alert("Login failed");
}
but each time user touched on a button, alert comes up "Lofin failed''
What went wrong here
I am defining my complete code here and also You can go to above expo link to watch it with the emulator.
import React from "react";
import { Alert, StyleSheet, Text, Touchable, TouchableHighlight, TouchableOpacity,useState, View } from "react-native";
import Loading from './Loading';
const Buttons = () => {
const defaultCode = React.useState(['1','2','3','4'])
const [passcode , setPasscode] = React.useState(['','','',''])
const presControl = num =>{
let tempCode = [...passcode];
for(var i = 0; i<tempCode.length;i++){
if(tempCode[i] == ''){
tempCode[i] = num;
break;
}else{
continue;
}
}
setPasscode(tempCode);
}
if(passcode===defaultCode){
alert("Login sucssesfull");
}else{
alert("Login failed");
}
const clearPress = () =>{
let tempCode = [...passcode]
for(var i = tempCode.length-1;i>=0;i--){
if(tempCode[i] != ''){
tempCode[i]='';
break;
}else{
continue;
}
}
setPasscode(tempCode);
};
let nopad = [
{id:1},
{id:2},
{id:3},
{id:4},
{id:5},
{id:6},
{id:7},
{id:8},
{id:9},
{id:0}
];
return(
<View >
<View style={styles.boxcontaner} >
{passcode.map(p =>{
return <View style={p !=''? styles.box2:styles.box1}></View>
})}
</View>
<View style={styles.noBox}>
{nopad.map(num =>{
return(
<TouchableOpacity style={styles.box}
key={num.id}
onPress={()=>presControl(num.id)} >
<Text style={styles.title}>{num.id}</Text>
</TouchableOpacity>
);
})}
</View>
<TouchableOpacity onPress={clearPress} style={styles.deleter} >
<Text style={styles.title}> x
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
title: {
fontSize:40,
justifyContent:'center',
marginTop:5,
},
box1: {
width:13,
height:13,
borderRadius:13,
borderWidth:1,
borderColor:'gray'
},
box2: {
width:13,
height:13,
borderRadius:13,
borderWidth:1,
borderColor:'gray',
backgroundColor:'red'
},
box: {
width:70,
height:70,
borderRadius:70,
borderWidth:1,
borderColor:'green',
alignItems:'center',
backgroundColor:'#F2F3F4',
justifyContent:'center',
},
boxcontaner:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
marginLeft:40,
marginRight:40,
marginTop:10,
},
noBox:{
alignItems:'center',
justifyContent:'center',
marginTop:100,
flexDirection:'row',
flexWrap:'wrap',
marginLeft:20,
width:270,
height:200,
},
deleter:{
width:70,
height:70,
borderRadius:70,
borderWidth:1,
borderColor:'green',
alignItems:'center',
backgroundColor:'#F2F3F4',
marginLeft:190,
marginTop:10
}
});
export default Buttons;

Answer 1

arrays are reference types , read this link please - https://masteringjs.io/tutorials/fundamentals/compare-arrays , you can use this code :
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];
function arrayEquals(a, b) {
return Array.isArray(a) &&
Array.isArray(b) &&
a.length === b.length &&
a.every((val, index) => val === b[index]);
}
arrayEquals(a, b); // false
arrayEquals(a, c); // true
https://snack.expo.dev/lmKFsz5J6 finished example