{

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 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 null check

for example, the user object is stored in a state object. using optional chaining operator ?, we will check 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, 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 simplify the same thing

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

Here is an 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 in all latest react, typescript versions.

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.