I'm trying to show a success feedback once the users are registered without error. There is an errors redux reducer object which stores errors that come from the back end. And the if statement is supposed to give the success feedback if the errors object is empty, it displays the errors if there are any, it also registers the users if there is none, but it doesn't seem to execute the if(props.errors === {}) block.
function onSubmit(e) {
e.preventDefault();
const newUser = {
fname: fname,
lname: lname,
phone: phone,
email: email,
password: password,
};
dispatch(register(newUser));
if (props.errors === {}) { //This block is not executed
setSnackOpen(true);
setFname('');
setLname('');
setEmail('');
setPhone('');
setPassword('');
}
console.log('errors :' + props.errors); //logs 'errors : [object, object]'
}
The errors reducer:
import { GET_ERRORS } from '../actionTypes/actionTypes';
const initialState = {
};
export const errorReducer = (state = initialState, action) => {
switch (action.type) {
case GET_ERRORS:
return action.payload
default:
return initialState;
}
};
Because you are comparing props.errors with {} new empty object so even though both are empty they are pointing to different memory location so if condition will return false for the statement if(props.errors === {})
You can check length of the props.errors like
if(!Object.keys(props.errors).length)
This if (props.errors === {}) would never be true, as it's actually comparing their references, which are not the same.
And I would do as below, and the advantage is that it would work both for when there isn't any key, as well as for when there are some, but their values are empty.
if (!Object.keys(props.errors).some((k) => props.errors[k]))
It's helpful for when you consider {firstNameError:"", lastNameError:"" } and {} as empty. See the snippet below:
const objOne={firstNameError:"", lastNameError:"" };
const objTwo= {};
if(!Object.keys(objOne).length){
console.log("First console prints empty")
}
if (!Object.keys(objOne).some((k) => objOne[k])){
console.log("Second console prints empty")
}
if(!Object.keys(objTwo).length){
console.log("First console prints empty")
}
if (!Object.keys(objTwo).some((k) => objTwo[k])){
console.log("Second console prints empty")
}Every time you declare a new object(empty or not), it will be created with a new reference. you can run below code in you dev console. all of them will give the result false. Because obj1 is a different empty object than obj2.
var obj1 = {}
var obj2 = {}
console.log(obj1 === {})
console.log(obj2 === {})
console.log(obj1 === obj2)
false
false
false
One way to check if an object is empty is this:
Object.keys(obj1)
This will give you an array of key values from object. so, you can check the length of the array.
const keysArray = Object.keys(obj1)
if (keysArray.length === 0){
// do something
}