What is mistaken with this code?

serve as ContactList({contacts}) {
  go back (
    <div>
      <ul>
        {contacts.duration &&
          contacts.map(touch => (
            <li key={touch.identity}>
              {touch.firstName} {touch.lastName}
            </li>
          ))}
      </ul>
    </div>
  )
}

No longer positive? Let me ask you every other query. What would occur with the above code
if contacts used to be []? That is proper! You would render 0!

I shipped this error to manufacturing at PayPal as soon as. No funny story. It used to be on
this web page:

When a consumer got here and not using a contacts, that is what they noticed:

Yeah, that used to be no longer amusing… Why is that? As a result of when JavaScript evaluates
0 && the rest the outcome will all the time be 0 as a result of 0 is falsy, so it
does not overview the correct facet of the &&.

The answer? Use a ternary to be particular about what you wish to have rendered within the
falsy case. In our case, it used to be not anything (so the usage of null is very best):

serve as ContactList({contacts}) {
  go back (
    <div>
      <ul>
        {contacts.duration
          ? contacts.map(touch => (
              <li key={touch.identity}>
                {touch.firstName} {touch.lastName}
              </li>
            ))
          : null}
      </ul>
    </div>
  )
}

What about this code? What is mistaken right here?

serve as Error({error}) {
  go back error && <div className="fancy-error">{error.message}</div>
}

No longer positive? What if error is undefined? If that is the case, you’ll be able to get the
following error:

Uncaught Error: Error(...): Not anything used to be returned from render. This typically manner a go back remark is lacking. Or, to render not anything, go back null.

Or, in manufacturing, you may get this:

react-dom.manufacturing.min.js:13 Uncaught Invariant Violation: Minified React error #152; seek advice from https://reactjs.org/doctors/error-decoder.html?invariant=152&args[]=f for the whole message or use the non-minified dev surroundings for complete mistakes and further useful warnings.

The issue this is that undefined && the rest will all the time overview to
undefined.

Actually, the issue in either one of those instances is we are the usage of && to do conditional
rendering. Stated otherwise, we are the usage of && to do conditional argument
passing. Be mindful,
JSX is a straightforward syntactic abstraction over calling React.createElement.
So it would be like seeking to write this:

serve as throwTheCandy(candyNames) {
  for (const candyName of candyNames) {
    throwCandy(candyName)
  }
}

throwTheCandy(sweets.duration && sweets.map(c => c.title))

That would not make any sense proper? We have were given our varieties all tousled. The
reason why React means that you can do that even though is as a result of rendering 0 is legitimate.

Fortuitously, TypeScript let you keep away from the second one instance of unintentionally
returning undefined. However on most sensible of that layer of coverage, how about we be
extra particular about our intentions. If you wish to do one thing conditionally,
do not abuse the logical AND operator (&&).

It if truth be told turns out counter-intuitive as a result of we ceaselessly use && in an if
situation to mention: if either one of those values are truthy, then do that factor,
differently do not. Sadly for our use-case, the && operator additionally has this
“characteristic” the place if each values are not truthy, it returns the price of the falsy
one:

0 && true // 0
true && 0 // 0
false && true // false
true && '' // ''

So I strongly recommend that fairly than abusing && (or || for that topic) in
your JSX, you employ precise branching syntax options, like ternaries
(situation ? trueConsequent : falseConsequent) and even if statements (and in
the long run, perhaps even
do expressions).

I am in my view keen on ternaries, however if you happen to’d choose if statements, that is
cool too. Here is how I would do the contacts factor with if statements:

serve as ContactList({contacts}) {
  let contactsElements = null
  if (contacts.duration) {
    contactsElements = contacts.map(touch => (
      <li key={touch.identity}>
        {touch.firstName} {touch.lastName}
      </li>
    ))
  }

  go back (
    <div>
      <ul>{contactsElements}</ul>
    </div>
  )
}

For my part, I believe the ternary is extra readable (if you happen to disagree, understand that
“readable” is subjective and the clarity of one thing has a lot more to do
with familiarity than the rest). No matter you do, you do you, simply do not do
insects.

Every other advantage of the usage of precise branching syntax is that take a look at protection equipment can
come across and point out when your checks don’t seem to be masking probably the most branches.

I am smartly mindful that shall we’ve solved the touch downside through the usage of
!!contacts.duration && ... or contacts.duration > 0 && ... and even
Boolean(contacts.duration) && ..., however I nonetheless choose no longer abusing the logical
AND operator for rendering. I choose being particular through the usage of a ternary.

To complete robust, if I needed to write either one of those parts nowadays, this is how
I would write them:

serve as ContactList({contacts}) {
  go back (
    <div>
      <ul>
        {contacts.duration
          ? contacts.map(touch => (
              <li key={touch.identity}>
                {touch.firstName} {touch.lastName}
              </li>
            ))
          : null}
      </ul>
    </div>
  )
}

serve as Error({error}) {
  go back error ? <div className="fancy-error">{error.message}</div> : null
}

Excellent success!