Refactoring Chronicles: Conditional Rendering and getting rid of the Wrapper Div
Tags: webdev, react, javascript, codequality
Published: 2019-12-12 08:40:17

---
title: Refactoring Chronicles: Conditional Rendering and getting rid of the Wrapper Div
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ufjoajass0h2a7smwlg7.png
description: use conditional rendering and React Fragments to get rid of wrapper divs ( and very slightly improve performance)
tags: #webdev, #react, #javascript #codequality
---


If you have been working with React I bet you found yourself often in the situation where you have to conditional render some components.
During a recent code-review I notice something inside a Form Component, where we needed to display the LastUpdatedBy field, only if available in the data.

The original code was this:
```
const AddLastUpdatedBy = ({record}) => (
<div>
 {record.updatedBy && <DisabledInput  source="updatedBy" label="Updated By" />}
</div>
)
```
There is nothing really bad in this code, but we could make it slightly better.

The first improvement is getting rid of the Wrapper Div that we don't need at all. 

![Wrapper Div](https://thepracticaldev.s3.amazonaws.com/i/2t50v8fy7sqxvjvd66pf.png)

Why? Does it harm?  Well, as the germans would say **Jein** (Yes & No):  It is not a big deal - in the end **it is just a small little empty additional Div in your DOM**, but **it could cause some unpredictable behaviour** if you are using FlexBox or Css Grid. (read a more detailed explanation [here](https://getstream.io/blog/react-fragments/) and [here](https://stackoverflow.com/a/47762117))

So what is the alternative? 

### React.Fragment

If you replace the Wrapper `<div>` with a `<React.Fragment>` the behaviour stays the same but you will not find any additional div in your Dom.

What is even better ( although a bit weird to see the first times) is using the more concise '<> </>' to wrap the component you need to conditionally render.

```
const AddLastUpdatedBy = ({record}) => (<>
 {record.updatedBy && <DisabledInput  source="updatedBy"  label="Updated By" />}
</>)
```

Still, I believe this snippet can be written more nicely.

Could we use a ternary operator to conditionally render the component?
Yes we could:

```
const AddLastUpdatedBy = ({record}) => record.updatedBy ? (<DisabledInput source="updatedBy" label="Updated By" />
    ) : (   <></>  )
```
but **I doubt this would be a more readable improvement.**
And the last line reminds me some weird [ascii emoji](http://asciimoji.com/)
 
Unfortunately, we can't just write :

```
 const AddLastUpdatedBy = ({record}) => record.updatedBy && 
(<DisabledInput source="updatedBy" label="Updated By" />) 
```
because we would get an error in the condition when nothing has to be rendered:

![Invariant Violation: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.](https://thepracticaldev.s3.amazonaws.com/i/2xkui5j9g7t2s2niitvo.png)

But the message is very clear,  just return null.
```
const AddLastUpdatedBy = ({record}) => record.updatedBy && (
<DisabledInput source="updatedBy" label="announcements.fields.updatedBy"/>) || null
```
The outcome is exactly the same as the Fragment <> option, but in my opinion is more concise and readable: it clearly tells us we want the DisableInput or Nothing 


Hope it helps. 

---
Photo by [Bench Accounting](https://unsplash.com/@benchaccounting?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on Unsplash