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!

The React docs say you should be able to return null, so it's strange this isn't working. — Joe Clay
– Joe Clay, Commented Jul 26, 2017 at 9:08
Returning null works just fine. Please update your question with a runnable minimal reproducible example using Stack Snippets (the [<>] toolbar button) demonstrating the problem with doing that. Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Jul 26, 2017 at 9:08
My apologies. Rushed to comment. Are you manipulating the style of this component anywhere else — Rajesh Dixit
– Rajesh Dixit, Commented Jul 26, 2017 at 9:09
@Rajesh: It'll be something along those lines, yeah. :-) Until they update, we can't answer the question properly. — T.J. Crowder
– T.J. Crowder, Commented Jul 26, 2017 at 9:11

dnarvaez27 · Accepted Answer · 2019-04-06 03:46:03Z

34

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 <></>;

answered Apr 6, 2019 at 3:46

dnarvaez27

5131 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Neve Over a year ago

Know how I can add an attribute to the empty tag? i.e., add a key if it's in a loop ?

dnarvaez27 Over a year ago

To add a prop (attribute) to a Fragment just use the "long version" of it: <React.Fragment key="...">...<React.Fragment>

Aaron Newton Over a year ago

Returning an empty fragment will return the following linter error github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/…. Use return null; instead stackoverflow.com/a/42083262/201648

manggaraaaa · Accepted Answer · 2017-07-26 09:15:46Z

11

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

Have you tried it already ?

answered Jul 26, 2017 at 9:15

manggaraaaa

8201 gold badge9 silver badges23 bronze badges

Comments

donatJ · Accepted Answer · 2020-10-06 19:37:43Z

10

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

<React.Fragment></React.Fragment>

edited Oct 6, 2020 at 19:37

donatJ

3,4043 gold badges36 silver badges52 bronze badges

answered Oct 6, 2020 at 16:21

Taghrid Kam

1211 silver badge2 bronze badges

1 Comment

Axe319 Over a year ago

Please consider adding some form of explanation or more detail to your answer. Code only answers are typically discouraged.

FrenchTechLead · Accepted Answer · 2017-07-26 09:14:13Z

7

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!

edited Jul 26, 2017 at 9:14

answered Jul 26, 2017 at 9:07

FrenchTechLead

1,1563 gold badges13 silver badges23 bronze badges

Comments

Nada Touil · Accepted Answer · 2021-12-01 09:17:35Z

1

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 <></>;
    }

answered Dec 1, 2021 at 9:17

Nada Touil

3474 silver badges13 bronze badges

3 Comments

Zachiah Over a year ago

This won't work. return is a statement, whereas the ternary operator wants an expression. You should return the whole ternary expression and remove the returns from the inside

Nada Touil Over a year ago

you should try it . Please check conditionnal rendering in react official page reactjs.org/docs/conditional-rendering.html. Just instead of "if else" , I used ternary condition

Zachiah Over a year ago

The difference is that if and else take statements whereas the ternary takes an expression

Arsalan Nasir · Accepted Answer · 2020-10-06 19:43:09Z

0

I think you should add ternary operators like:

this.state.users? return null : return <div>We have user<\div>

answered Oct 6, 2020 at 19:43

Arsalan Nasir

113 bronze badges

1 Comment

thedomguy Jan 17 at 13:05

This approach won't work. The return keyword is a statement, while the ternary operator expects an expression To fix this, you need to return the entire ternary expression directly and remove the return keywords from inside it. return this.state.users ? null : <div>We have user</div>; @zach rightly commented the same in the previous answer.

beeeliu · Accepted Answer · 2022-01-25 19:07:54Z

0

One thing I did using React.useState was to initialize an empty JSX.Element object like so

const [jsxObject, setJsxObject] = React.useState(<></>);

Then, in whatever function you want to return a JSX.Element

setJsxObject(<h1>whatever inside</h1>);

Render it in the component

{jsxObject}

answered Jan 25, 2022 at 19:07

beeeliu

1091 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

3 Comments

Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related