writing clean code: find an property in object-array with null-check

Question

I want to write clean-code. I have this react-code (typescript 3.6.4):

<Button color="primary"
    size="large"
    disabled={props.user.objectArray.find((element)=> {
                return element.primaryKey === state.findPrimaryKey
            }).isClosed}
    onClick={doSomething}>
Download information

Now I get the message, that the return value could be "undefined". Understandable, maybe the primaryKey could not be found in the object array.

I could write a function which checks first for null, but could this be fixed anyhow without a function?

function getBooleanValue() {
    let booleanCheck = false;
    const temp = props.user.objectArray.find((element) => {
        return element.primaryKey === state.findPrimaryKey
    });
    if (typeof temp !== "undefined") {
        booleanCheck = temp.siteClosed;
    }
    return booleanCheck;
}

How can I write a clean code to get my boolean value?

Aprillion · Accepted Answer · 2019-11-09 08:59:07Z

1

I would start by storing the found element into a variable:

const foundElement = props.user.objectArray.find(element => element.primaryKey === state.findPrimaryKey}

Then you can simply fix the condition:

// when element is not found, it's disabled
const isDisabled = !!foundElement && foundElement.isClosed

or

// when element is not found, it's not disabled 
const isDisabled = !foundElement || foundElement.isClosed

or you can use a default value:

const isDisabled = (foundElement || {}).isClosed

In total, the following could work:

(props.user.objectArray.find(element => element.primaryKey === state.findPrimaryKey) || {}).isClosed

edited Nov 9, 2019 at 8:59

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

answered Nov 7, 2019 at 14:50

Sulthan

130k23 gold badges223 silver badges277 bronze badges

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

2 Comments

Paul Over a year ago

Still get the compiler error "Object is possibly undefined". I think I will stick with the function :-/

Aprillion Over a year ago

looks like a TS bug, the suggested workaround is to use !, the non-null assertion operator => (props.xxx || {})!.isClosed

tareq aziz · Accepted Answer · 2019-11-07 14:56:39Z

0

I think you may try this way

<Button color="primary"
    size="large"
    disabled={props.user.objectArray.find((element)=> {
                return element.primaryKey === state.findPrimaryKey
            }) && props.user.objectArray.find((element)=> {
                return element.primaryKey === state.findPrimaryKey
            }).isClosed}
    onClick={doSomething}>
Download information

Here if 1st expression return falsy value then 2nd expression will execute, so if 1st expression is undefined javascript count it as falsy value and then (...).isClosed the 2nd part will not execute

answered Nov 7, 2019 at 14:56

tareq aziz

7874 silver badges12 bronze badges

3 Comments

Paul Over a year ago

Sadly, compiler is still complaining about the second "props.user.objectarray..." "Object is possibly undefined"

tareq aziz Over a year ago

@Paul code should be like this, as props.user.objectArray is returning undefine

disabled={props.user.objectArray && props.user.objectArray.find((element)=> {                 return element.primaryKey === state.findPrimaryKey             })}

Paul Over a year ago

Maybe it is a compiler error, but Object is possibly undefined on second props.user... I will stay with a function. Thank you for your effort

Collectives™ on Stack Overflow

writing clean code: find an property in object-array with null-check

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related