React nullish coalescing operator example

React nullish coalescing operator example

nullish coalescing operator is released in ECMAScript 2020.

It is a logical operator applied to two or more operands

What is the nullish coalescing operator and how to use this in react components?

You can check How to use the operator in Angular

nullish coalescing operator is a logical operator used to check value is null or undefined on two values.

nullish abbreviated as null and undefined values of a parameter coalescing is of combining two values

Here is a syntax

firstexpression ?? secondexpression;

?? double question mark is a symbol for the null coalescing operator

This returns value

  • firstexpression value if the second expression is null or undefined
  • secondexpression value if the first expression is null or undefined

Here is an example

const output = null ?? "welcome";
console.log(output); // welcome

const output1 = 121 ?? 0;
console.log(output1); //121

To check we have two operators introduced in typescript and javascript

  • Optional chaining operator (?)
  • Nullish coalescing operator(??)

React optional chaining operator

In react component, When you are displaying data from a state object, You have to use a null check

for example, the user object is stored in a state object. using the optional chaining operator ?, we will check whether the user is null or not

{
  this.state.user?.name;
}

if the user object is null or undefined, the name returns undefined.

if the user object is not null or undefined, the user.name is returned as expected.

Here is a complete example

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

interface AppProps {}
interface AppState {
  name: string;
  user: User;
}
class User {
  id: number;
  name: string;
}
class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: "React",
    };
  }

  render() {
    return (
      <div>
        <p>Welcome {this.state.user?.name} </p>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

React nullish coalescing operator example

We have seen how to check null checks using optional chaining.

Let’s see how coalescing operator simplifies the same thing

const name = this.state.user && this.state.user.name;

Here is a complete example

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

interface AppProps {}
interface AppState {
  name: string;
  user: User;
}
class User {
  id: number;
  name: string;
}
class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: "React",
    };
  }

  render() {
    const name = this.state.user && this.state.user.name;
    return (
      <div>
        <p>Welcome {name} </p>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

This nullish operator applies to all data type values of a typescript

  • number
  • string
  • boolean
  • object

It supports all the latest react, and typescript versions.

Conclusion

It helps to write a clean and simple code in writing react components.