{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-use-the-javascript-optional-chaining-operator-in-react/", "result": {"data":{"markdownRemark":{"html":"

Recently I came across some React code snippets that used an operator I was not familiar with. I did some research and found out that the operator is what is known as an optional chaining operator (?.).

\n

From MDN:

\n
\n

The optional chaining operator (?.) allows us to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

\n
\n

The definition will be clear with the following example:

\n

A typical task in React apps is to fetch some data from an API endpoint, check that the data is truthy and then map through the data to display a list.

\n
import React, { useState, useEffect } from "react"\nimport axios from "axios"\n\nconst App = () => {\n  const [contacts, setContacts] = useState([])\n\n  useEffect(() => {\n    ;(async () => {\n      const { data } = await axios.get(\n        "https://jsonplaceholder.typicode.com/users"\n      )\n      setContacts(data)\n    })()\n  }, [])\n\n  return (\n    <div className="m-5">\n      <h2>Contacts List</h2>\n      <ul>\n        {contacts &&\n          contacts.map(contact => <li key={contact.name}>{contact.name}</li>)}\n      </ul>\n    </div>\n  )\n}\nexport default App
\n

In the code snippet above, we are fetching a list of contacts from JSONPlaceholder (a fake REST API). On lines 20-21, we are using the JavaScript logical && operator to check that contacts exists before we map through the contacts array and render a list of contacts.

\n

To repeat, we are using the && logical operator to validate that contacts is truthy.

\n
You can find out more about JavaScript && and || logical operators in my blog post here.
\n

With optional chaining operators, we don’t have to explicitly test the state of the contacts variable before mapping through it.

\n

?. implicitly ensures that data is not null or undefined. If data is null or undefined, the expression returns undefined.

\n

So, using ?., we can rewrite the rendering logic as follows:

\n
import React, { useState, useEffect } from "react"\nimport axios from "axios"\n\nconst App = () => {\n  const [contacts, setContacts] = useState([])\n\n  useEffect(() => {\n    ;(async () => {\n      const { data } = await axios.get(\n        "https://jsonplaceholder.typicode.com/users"\n      )\n      setContacts(data)\n    })()\n  }, [])\n\n  return (\n    <div className="m-5">\n      <h2>Contacts List</h2>\n      <ul>\n        {contacts?.map(contact => (\n          <li key={contact.name}>{contact.name}</li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport default App
\n","frontmatter":{"title":"How to Use the JavaScript Optional Chaining Operator in React?","date":"2021-07-08"}}},"pageContext":{"slug":"/how-to-use-the-javascript-optional-chaining-operator-in-react/","prev":{"fields":{"slug":"/is-pseudoclass-in-css/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-dark-mode-theme-in-react-using-css-variables-and-react-context/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}