Optional chaining with React and TypeScript
Tags: react, typescript
Published: 2020-02-05 04:18:44

---
title: Optional chaining with React and TypeScript
published: true
description: What optional chaining is and how to use it in React and TypeScript apps
tags: react, typescript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8zex5zq98j5qp1xz374b.png
---

[Optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) is a cracking new JavaScript feature that we can use today in React and TypeScript apps. What is this feature, and how is it useful to React and TypeScript apps? Let's find out.

## A simple component

Let's start with a simple component:

```jsx
type Person = {
  name: string,
  subscription?: Subscription
};
type Subscription = {
  amount: number,
  lastPayment?: Payment
};
type Payment = {
  amount: number,
  date: Date
};
type Props = {
  person: Person
};
const PersonCard: React.FC<Props> = ({
  person
}) => {
  return (
    <div>
      <div>
        <span>Name: </span>
        <span>{person.name}</span>
      </div>
      <div>
        <span>Subscription amount: </span>
        <span>{person.subscription.amount}</span> {// 💥}
      </div>
      <div>
        <span>Last payment date: </span>
        <span>
          {person.subscription.lastPayment.date} {// 💥}
        </span>
      </div>
    </div>
  );
};
```

This raises type errors, _Object is possibly 'undefined'_, because the `subscription` property is optional and, therefore, could be `undefined`. The same goes for the `lastPayment` property inside the `subscription` object:

![Property could be undefined errors](https://thepracticaldev.s3.amazonaws.com/i/qjhj8pfabo6vad9eyt44.png)

We want to render nothing for the amount when there is no subscription. We also want to render nothing for the last payment date when there is no last payment. So, we'd usually use [short-circuit evaluation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation):

```jsx
<div>
  <span>Subscription amount: </span>
  <span>{person.subscription && person.subscription.amount}</span>
</div>
<div>
  <span>Last payment date: </span>
  <span>
    {person.subscription &&
      person.subscription.lastPayment &&
      person.subscription.lastPayment.date}
  </span>
</div>
```

## Using optional chaining on optional props

Optional chaining gives us a much simpler and shorter solution:

```jsx
<div>
  <span>Subscription amount: </span>
  <span>{person.subscription?.amount}</span>
</div>
<div>
  <span>Last payment date: </span>
  <span>{person.subscription?.lastPayment?.date}</span>
</div>
```

Notice the `?` after the `subscription` and `lastPayment` properties. This is the [optional chaining operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) which means if the property before it is `null` or `undefined` an error won't occur if its members are accessed. Instead, the expression will be automatically short-circuited, and `undefined` returned. Neat!

## Using optional chaining on optional function props

Let's look at a different component:

```jsx
type Props = {
  value?: string,
  onValueChange?: (value: string) => void
};
const Textbox: React.FC<Props> = ({
  value,
  onValueChange
}) => {
  return (
    <input
      type="text"
      value={value}
      onChange={e => onValueChange(e.currentTarget.value) //💥}
    />
  );
};
```

We get a type error because `onValueChange` is optional and could be `undefined`.

We can use optional chaining to resolve the error:

```jsx
<input
  type="text"
  value={value}
  onChange={e =>
    onValueChange?.(e.currentTarget.value)
  }
/>
```

Notice that we need a `.` after the optional chaining operator (`?`); otherwise, we get a parsing error.

## Can I use optional chaining now?

Yes, if you are running recent versions of React and TypeScript:

- **TypeScript 3.7** supports optional chaining
- **Babel 7.8.0** supports optional chaining
- Projects created with **create react app 3.3.0** supports optional chaining as well!

*Originally published at [https://www.carlrippon.com/optional-chaining-with-react-and-typescript](https://www.carlrippon.com/optional-chaining-with-react-and-typescript/) on Feb 04, 2020*.