React nullish coalescing operator example


nullish coalescing operator is released in ecmaScript 2020.

It is logical operator applied to two or more operands

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

You can check How to use 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 an parameter coalescing is of combining two values

Here is an syntax

firstexpression ?? secondexpression

?? double question mark is an symbol for null coalescing operator

This returns value

  • firstexpression value if second expression is null or undefined
    • secondexpression value if 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 state object, You have to use null check

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

{this.state.user?.name}    

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

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

This supports in all latest react, typescript versions

Conclusion

This 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.