11

I recently learned about optional chaining in Javascript and have been making use of it in a React/NodeJS project. Works great.

I noticed I have been using it with arrays map, even without thinking about it much -- it seemed a natural use (here items is an array, or possibly undefined)

        {items?.map(postListItem => ....

That is, it will map if items exists, but not if items is undefined, but would avoid any run-time errors if I were to call map on undefined

Nonetheless I don't know if this is an acceptable use or whether I'm mis-using optional chaining. I searched for an answer but as of yet haven't been able to find one, which makes me suspect I'm mis-using it. Any info much appreciated!

Improve this question
3
  • Looks like a nifty shortcut. If it works, go for it Commented Feb 11, 2020 at 8:58
  • why the curly? if an object, then a key is missing. Commented Feb 11, 2020 at 9:00
  • 2
    @NinaScholz It's JSX syntax - { can be put at some positions (like as a prop, or a child of an element) to insert what the following JS expression evaluates to. Eg <div>{ true ? 'foo' : 'bar' }</div> results in <div>foo</div>. Commented Feb 11, 2020 at 9:20

4 Answers 4

Reset to default
16

See answer here regarding the typescript usage. You need a period for array null safe Optional Chaining.

    this.mostRecentMfaAttempt = this.verificationsAttempts?.content?.[0]

How to use optional chaining with array in Typescript?

Using optional chaining operator for object property access

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

1 Comment

Maybe worth noting that this crashes if the array exists but is empty.
4

If the chaining fails, the expression will evaluate to undefined.

When a child is evaluated to undefined, it just won't render.

Conditional rendering is already quite a common strategy. Previously, when you have something that may be an array or may be undefined, and you want to map if there's an array, you would have had to do something like:

{ items && items.map( ...

This works because, if items is undefined, the whole expression will be evaluated to undefined, and no rendering will happen, and no errors will be thrown.

Using optional chaining works exactly the same way, except that it's more concise. So yes, this is a perfectly valid thing to do.

Optional chaining is stage 4, so you can count on it working reliably.

Arrays are objects. But optional chaining isn't only for objects - it can work for anything which may have a property or method. Eg const bar = foo?.toFixed(2) will work fine if foo is null, undefined, or a number (numbers have a toFixed method).

Improve this answer

Comments

3

The optional chaining way to your problem is:

{items?.map?.(postListItem => ....)

Read more here: MDN Web Docs: Optional chaining

Improve this answer

2 Comments

This could help if one doesn't know if items is an array or not, but if one is sure it will either be an array or undefined, there's no need for the second ?.
True but since he said he just started learning about optional chaining, I was just showing of how to do it using only optional chaining, not necessarily the best way of doing it.
0

To get data from the MongoDB database by filtering use below system.

cars.filter(car => car.email === user.email)?.map(car => {
    return (
        <tr key={car._id}>
            <td>{car.userName}</td>
            <td className=''>{car.email}</td>
            <td>{car.name}</td>
            <td><img src={car.img} alt="" /></td>
        </tr>
    )
})
Improve this answer

1 Comment

Please edit your question and place code in code blocks properly, and maintain indentation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.