Conditional statement for testing an empty object not executing

Question

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;
  }
};

props.errors isn't the same as a newly created blank object. === tests identity. You need this: stackoverflow.com/questions/2673121/… — user5734311
– user5734311, Commented Jun 20, 2022 at 11:31

Prashant Shah · Accepted Answer · 2022-06-20 11:33:38Z

1

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)

answered Jun 20, 2022 at 11:33

Prashant Shah

2561 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deniz Karadağ · Accepted Answer · 2022-06-20 12:15:56Z

1

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
}

answered Jun 20, 2022 at 12:15

Deniz Karadağ

7614 silver badges10 bronze badges

Comments

Youssouf Oumar · Accepted Answer · 2022-06-20 12:42:00Z

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")
}

Collectives™ on Stack Overflow

Conditional statement for testing an empty object not executing

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related