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?

score 1 · Accepted Answer · edited Nov 09 '19 at 08:59

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 09 '19 at 08:59

Aprillion

21,510
5
55
89

answered Nov 07 '19 at 14:50

Sulthan

128,090
22
218
270

Still get the compiler error "Object is possibly undefined". I think I will stick with the function :-/ – Paul Nov 09 '19 at 08:40
looks like [a TS bug](https://github.com/microsoft/TypeScript/issues/29642), the suggested workaround is to use `!`, the [non-null assertion operator](https://stackoverflow.com/a/42274019/1176601) => `(props.xxx || {})!.isClosed` – Aprillion Nov 09 '19 at 09:06

score 0 · Answer 2 · answered Nov 07 '19 at 14:56

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 07 '19 at 14:56

tareq aziz

749
4
11

Sadly, compiler is still complaining about the second "props.user.objectarray..." "Object is possibly undefined" – Paul Nov 09 '19 at 08:39
@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 })}` – tareq aziz Nov 10 '19 at 07:56
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 – Paul Nov 10 '19 at 12:18

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

2 Answers2