How to render function return empty in React Application

React is a component-based UI library that displays the webpage with several components.

Each component returns HTML output and is displayed on the webpage.

Sometimes, We need to display empty to return in Empty in Application.

#How to return an empty jsx tag from render function in ReactJS

There are multiple ways we can return jsx empty or null from the render function.

One way, using empty tags or React fragments

an empty tag without children <></> can be returned from the return statement as seen below. Similarly, framgments <React.Fragment></React.Fragment> also returned from render function.

The advantage of this approach is it does not add any additional DOM nodes to the component.

Empty Tag in jsx example:

import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return <></>;
  }
}

export default ClassComponent;

React. Fragment example:

import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return <React.Fragment></React.Fragment>;
  }
}

export default ClassComponent;

these empty tags can be added to conditional expression or ternary operator to return empty content as given below example

render() {
        ( this.state.employee === undefined ) ?
            return <></>
        : return <span>employees found</span>;
    }

In another way, javascript values null, empty, undefined, true, and false are valid children in return statements.

It is not recommended to use these values with the following disadvantages

• You have to use some of the values in DIV(<div>{undefined}</div>) and add additional nodes to render the component
• These values are not worked in the typed language in typescript

#Typescript react component render function to return empty

Typescript is a type of safety language, So Render function always returns ReactElement or JSXElementConstructor.

So, return values such as null, true, and false throw below the compilation error

Type 'true' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'.

Recommeded way is to retun empty jsx tags(<></>) or Fragments (<React.Fragment />)

Typescript class and functional components return fragments or empty jsx tags.

Here is an example typescript component to return empty jsx content.

import React, { Component } from "react";

class ClassComponent extends Component {
  render() {
    return <React.Fragment />;
  }
}

export default ClassComponent;

#Conclusion

To summarize, It is always recommended way return the following In React javascript and typescript components.

• Empty JSX tags(<></>)
• React Fragments(<React.Fragment />)