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

i have code in react looks this:

class usermanagement extends react.component {      constructor() {          super();          this.state = {              users: undefined,          };      }        componentwillmount() {          // load users state promise          settimeout(() => {            this.setstate({users: []});          }, 800);      }        render() {          if ( this.state.users === undefined ) {              // until users state updated, want return empty element              return null;          }            // real site rendering          return <div>we have users</div>;      }  }    reactdom.render(    <usermanagement />,    document.getelementbyid("root")  );

<div>will blank @ first while don't have users, show "we have users" after 800ms when 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 return empty element until users state returned? tried return (null) suggested in places, browser raise error:

uncaught typeerror: cannot read property 'style' of null

i aware of option return (<div></div>), not sure best practice in case.

thnaks!

i think add { null } not null, in section show empty component.

have tried ?