How to return an empty jsx element from the render function in react?

Question

I have a code in react that looks something like this:

class UserManagement extends React.Component {
    constructor() {
        super();
        this.state = {
            users: undefined,
        };
    }

    componentWillMount() {
        // load the users state with a Promise
        setTimeout(() => {
          this.setState({users: []});
        }, 800);
    }

    render() {
        if ( this.state.users === undefined ) {
            // until the users state is updated, I want to return an empty element
            return null;
        }

        // real site rendering
        return <div>We have users</div>;
    }
}

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

<div>Will be blank at first while we don't have users, then show "We have users" after 800ms when we have users</div>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

My question is: How to return an empty element until the users state is returned? I tried to return (null) as suggested in some places, but the browser raise this error:

Uncaught TypeError: Cannot read property 'style' of null

I am aware of the option to return (<div></div>), but I am not sure that this is the best practice in this case.

Thnaks!

Answer 1

Ok so as Facebook says :

Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty or . Some people even got clever and started returning to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a element, though in the future we hope to not put anything in the document. In the mean time, elements do not affect layout in any way, so you can feel safe using null today!

Answer 2

Just in case anyone want another approach:

Since React v16.2 you can use Fragments allowing to add an empty JSX tag like this:

  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );

Example extracted from official docs.

So in your case, returning a Fragment without any childs, works.

  return <></>;

Answer 3

I think just add { null } not null, in your section to show empty component.

Have you tried it already ?

Answer 4

You need to wrap it in a React.Fragment tag.

<React.Fragment></React.Fragment>

Answer 5

use the react Fragment <></>. One of its advantages is that it does not create additional Dom nodes into rendered component (such as an empty div tag).

You can use ternary condition to make your code more readable.

    render() {
        ( this.state.users === undefined ) ?
            return <></>   
        : return <div>We have users</div>;
    }

or oven simpler syntax would be

    render() {
        ( this.state.users) ?
            return <div>We have users</div>  
        : return <></>;
    }