Home / Questions / 553640
Accepted
Agustin G.
Asked: 2022-08-26 04:58:31 +0800 CST 2022-08-26 04:58:31 +0800 CST

How does the verifier "?" in React/Next?

  • 772

I have a query, I'm working on a project in React 17 and Next 12, and there is a way to validate that an object is not nullin a way that I didn't know, something like:

miObjeto?.objetoInterior?.propiedad = value

This avoids doing things likeif(miObjeto && miObjeto.objetoInterior) {...}

I first thought it was a JS feature, but when I tried it in a Vue project it threw errors.

Now, I want to make a function like this:

useEffect(() => {
    const body = document.querySelector("body") || null;
    if (mobileMapState === 3) {
      handleOpenMap();
      body.style.overflow = "hidden";
    } else {
      body.style.overflow = "auto";
    }
  }, [mobileMapState]);

And it happens to me that I want to make sure that bodyit is not nullbefore doing body.style.overflow = "hidden";, for what I am trying to do

body?.style?.overflow = "hidden";

And I get an error from Eslint:

Parsing error: Invalid left-hand side in assignment expression.

so i try

body && body.style.overflow = "hidden";

But the error is the same.

The only way I found to do this was:

  if (body) {
    body.style.overflow = "hidden";
  }

And although it works, I have doubts, such as why I can't use it ?in this case, and if there was a correct way to use it to make the validation shorter.

Thank you very much

javascript

1 Answers

  1. Best Answer

    It is known as optional chaining.

    And what it does is simplify access to values ​​by returning null or undefined if it doesn't exist, instead of reporting an error.

    It is also more readable than the short circuit operator.

    const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

    Reference: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Optional_chaining

    Now for deactivating that line

    adventurer.dog?.name; // eslint-disable-line no-use-before-define

    Or directly in the config.

    { "allowShortCircuit": true, "allowTernary": true }

    Reference:

    https://eslint.org/docs/latest/rules/no-unused-expressions

    • 3