How to have conditional elements and keep DRY with Facebook React s JSX

Question

How do I optionally include an element in JSX   Here is an example using a banner that should be in the component if it has been passed in   What I want to avoid is having to duplicate HTML tags in the if statement   render  function          var banner      if  this state banner            banner    lt div id  banner  gt  this state banner  lt  div gt         else           banner                   return            lt div id  page  gt               banner               lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt

User · Answer

There is also a really clean one line version... { this.props.product.title || "No Title" }

Ie:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

User · Answer

I use a more explicit shortcut  A Immediately-Invoked Function Expression  IIFE           gt      if  isEmpty routine queries         return  lt Grid devices  devices  routine  routine  configure       gt  this setState  configured  true     gt      else if  this state configured        return  lt DeviceList devices  devices  routine  routine  configure       gt  this setState  configured  false     gt      else       return  lt Grid devices  devices  routine  routine  configure       gt  this setState  configured  true     gt

User · Answer

Just to extend  Jack Allan answer with references to docs   React basic  Quick Start  documentation suggests null in such case   However  Booleans  Null  and Undefined Are Ignored as well  mentioned in Advanced guide

User · Answer

Just to add another option - if you like tolerate coffee-script you can use coffee-react to write your JSX in which case if else statements are usable as they are expressions in coffee-script and not statements   render  - gt     lt div className  container  gt              if something          lt h2 gt Coffeescript is magic  lt  h2 gt        else          lt h2 gt Coffeescript sucks  lt  h2 gt           lt  div gt

User · Answer

Here is my approach using ES6    import React    Component   from  react      you should use ReactDOM render instad of React renderComponent import ReactDOM from  react-dom    class ToggleBox extends Component     constructor props        super props       this state              toggle box is closed initially       opened  false                http   egorsmirnov me 2015 08 16 react-and-es6-part3 html     this toggleBox   this toggleBox bind this          toggleBox            check if box is currently opened     const   opened     this state      this setState            toggle value of  opened        opened   opened                 render         const   title  children     this props      const   opened     this state      return          lt div className  box  gt           lt div className  boxTitle  onClick  this toggleBox  gt             title           lt  div gt           opened  amp  amp  children  amp  amp               lt div class  boxContent  gt               children             lt  div gt                    lt  div gt                ReactDOM render      lt ToggleBox title  Click me  gt       lt div gt Some content lt  div gt     lt  ToggleBox gt     document getElementById  app       Demo  http   jsfiddle net kb3gN 16688   I m using code like    opened  amp  amp   lt SomeElement   gt     That will render SomeElement only if opened is true  It works because of the way how JavaScript resolve logical conditions   true  amp  amp  true  amp  amp  2     will output 2 true  amp  amp  false  amp  amp  2     will output false true  amp  amp   some string      will output  some string  opened  amp  amp   lt SomeElement   gt      will output SomeElement if  opened  is true  will output false otherwise   As React will ignore false  I find it very good way to conditionally render some elements

User · Answer

The experimental ES7 do syntax makes this easy  If you re using Babel  enable the es7 doExpressions feature then   render       return        lt div id  banner  gt         do           if  this state banner              this state banner            else              Something else                           lt  div gt           See http   wiki ecmascript org doku php id strawman do expressions

User · Answer

Personally  I really think the ternary expressions show in  JSX In Depth   are the most natural way that conforms with the ReactJs standards   See the following example  It s a little messy at first sight but works quite well    lt div id  page  gt     this state banner          lt div id  banner  gt        lt div class  another-div  gt          this state banner        lt  div gt       lt  div gt           null      lt div id  other-content  gt      blah blah blah       lt  div gt   lt  div gt

User · Answer

Just leave banner as being undefined and it does not get included

User · Answer

I like the explicitness of Immediately-Invoked Function Expressions  IIFE  and if-else over render callbacks and ternary operators   render       return        lt div id  page  gt               gt            const   banner     this state          if  banner              return                lt div id  banner  gt  banner  lt  div gt                                    Default         return              lt div gt     lt  div gt                                lt div id  other-content  gt          blah blah blah           lt  div gt       lt  div gt           You just need to get acquainted of the IIFE syntax   expression  is the usual React syntax  inside it just consider that you re writing a function that is invoking itself   function            that need to be wrapped inside parens   function

User · Answer

This component works when you have more than one element inside  if  branch   var Display   React createClass     render  function          if   this props when          return false            return React DOM div null  this props children              Usage   render  function       return        lt div gt         lt Display when  this state loading  gt          Loading something             lt div gt Elem1 lt  div gt           lt div gt Elem2 lt  div gt         lt  Display gt         lt Display when   this state loading  gt          Loaded          lt div gt Elem3 lt  div gt           lt div gt Elem4 lt  div gt         lt  Display gt       lt  div gt           P s  someone think that these components are not good for code reading  But in my mind  Html with javascript is worse

User · Answer

When having to only render something if passed condition is fullfilled  you can use syntax     condition  amp  amp  what to render     The code in this manner would look like this    render         const   banner     this state      return            lt div id  page  gt                banner  amp  amp   lt div id  banner  gt  banner  lt  div gt                 lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt             There are  of course  other valid ways to do this  it s all up to preferences and the occassion  You can learn more ways on how to do conditional rendering in React in this article if you re interested

User · Answer

There is also a technique using render props to conditional render a component  It s benefit is that the render wouldn t evaluate until the condition is met  resulting in no worries for null and undefined values   const Conditional      condition  render      gt      if  condition        return render          return null      class App extends React Component     constructor         super        this state     items  null          componentWillMount         setTimeout      gt    this setState   items   1 2        2000          render         return          lt Conditional         condition    this state items          render       gt               lt div gt               this state items map value   gt   lt p gt  value  lt  p gt               lt  div gt                     gt

User · Answer

I made https   github com ajwhite render-if recently to safely render elements only if the predicate passes    renderIf 1   1     2      lt span gt Hello  lt  span gt       or  const ifUniverseIsWorking   renderIf 1   1     2            ifUniverseIsWorking     lt span gt Hello  lt  span gt

User · Answer

You may also write it like     this state banner  amp  amp   lt div gt       lt  div gt      If your state banner is null or undefined  the right side of the condition is skipped

User · Answer

The If style component is dangerous because the code block is always executed regardless of the condition  For example  this would cause a null exception if banner is null     dangerous render  function        return        lt div id  page  gt         lt If test  this state banner  gt           lt img src  this state banner src    gt         lt  If gt         lt div id  other-content  gt           blah blah blah           lt  div gt       lt  div gt           Another option is to use an inline function  especially useful with else statements    render  function        return        lt div id  page  gt         function            if  this state banner              return  lt div id  banner  gt  this state banner  lt  div gt                    call this          lt div id  other-content  gt           blah blah blah           lt  div gt       lt  div gt           Another option from react issues   render  function        return        lt div id  page  gt          this state banner  amp  amp           lt div id  banner  gt  this state banner  lt  div gt                 lt div id  other-content  gt           blah blah blah           lt  div gt       lt  div gt

User · Answer

As already mentioned in the answers  JSX presents you with two options  Ternary operator   this state price    lt div gt  this state price  lt  div gt    null    Logical conjunction   this state price  amp  amp   lt div gt  this state price  lt  div gt       However  those don t work for price    0  JSX will render the false branch in the first case and in case of logical conjunction  nothing will be rendered  If the property may be 0  just use if statements outside of your JSX

User · Answer

Simple  create a function   renderBanner  function       if   this state banner  return    return        lt div id  banner  gt  this state banner  lt  div gt           render  function        return        lt div id  page  gt         this renderBanner           lt div id  other-content  gt          blah blah blah           lt  div gt       lt  div gt           This is a pattern I personally follow all the time  Makes code really clean and easy to understand  What s more it allows you to refactor Banner into its own component if it gets too large  or re-used in other places

User · Answer

What about this  Let s define a simple helping If component    var If   React createClass       render  function             if  this props test                return this props children                    else               return false                        And use it this way   render  function          return            lt div id  page  gt               lt If test  this state banner  gt                   lt div id  banner  gt  this state banner  lt  div gt               lt  If gt               lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt             UPDATE  As my answer is getting popular  I feel obligated to warn you about the biggest danger related to this solution  As pointed out in another answer  the code inside the  lt If   gt  component is executed always regardless of whether the condition is true or false  Therefore the following example will fail in case the banner is null  note the property access on the second line     lt If test  this state banner  gt       lt div id  banner  gt  this state banner url  lt  div gt   lt  If gt    You have to be careful when you use it  I suggest reading other answers for alternative  safer  approaches   UPDATE 2  Looking back  this approach is not only dangerous but also desperately cumbersome  It s a typical example of when a developer  me  tries to transfer patterns and approaches he knows from one area to another but it doesn t really work  in this case other template languages    If you need a conditional element  do it like this   render  function          return            lt div id  page  gt               this state banner  amp  amp                   lt div id  banner  gt  this state banner  lt  div gt                lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt             If you also need the else branch  just use a ternary operator     this state banner       lt div id  banner  gt  this state banner  lt  div gt        lt div gt There is no banner  lt  div gt      It s way shorter  more elegant and safe  I use it all the time  The only disadvantage is that you cannot do else if branching that easily but that is usually not that common   Anyway  this is possible thanks to how logical operators in JavaScript work  The logical operators even allow little tricks like this    lt h3 gt  this state banner title     Default banner title   lt  h3 gt

User · Answer

With ES6 you can do it with a simple one-liner  const If     children  show     gt  show   children   null    show  is a boolean and you use this class by   lt If show  true  gt  Will show  lt  If gt   lt If show  false  gt  WON T show  lt  div gt   lt  If gt

User · Answer

I made https   www npmjs com package jsx-control-statements to make it a bit easier  basically it allows you to define  lt If gt  conditionals as tags and then compiles them into ternary ifs so that the code inside the  lt If gt  only gets executed if the condition is true

User · Answer

Maybe it helps someone who comes across the question  All the Conditional Renderings in React It s an article about all the different options for conditional rendering in React    Key takeaways of when to use which conditional rendering      if-else   is the most basic conditional rendering beginner friendly use if to opt-out early from a render method by returning null      ternary operator   use it over an if-else statement it is more concise than if-else      logical  amp  amp  operator   use it when one side of the ternary operation would return null      switch case   verbose can only be inlined with self invoking function avoid it  use enums instead      enums   perfect to map different states perfect to map more than one condition      multi-level nested conditional renderings   avoid them for the sake of readability split up components into more lightweight components with their own simple conditional rendering use HOCs      HOCs   use them to shield away conditional rendering components can focus on their main purpose      external templating components   avoid them and be comfortable with JSX and JavaScript

User · Answer

You can use a function and return the component and keep thin the render function  class App extends React Component     constructor  props        super props       this  renderAppBar   this  renderAppBar bind this          render          return  lt div gt          renderAppBar            lt div gt Content lt  div gt        lt  div gt          renderAppBar          if  this state renderAppBar          return  lt AppBar   gt

User · Answer

Most examples are with one line of  html  that is rendered conditionally  This seems readable for me when I have multiple lines that needs to be rendered conditionally   render  function          This will be renered only if showContent prop is true   var content         lt div gt         lt p gt something here lt  p gt         lt p gt more here lt  p gt         lt p gt and more here lt  p gt       lt  div gt      return        lt div gt         lt h1 gt Some title lt  h1 gt          this props showContent   content   null       lt  div gt             First example is good because instead of null we can conditionally render some other content like  this props showContent   content   otherContent   But if you just need to show hide content this is even better since Booleans  Null  and Undefined Are Ignored  render  function       return        lt div gt         lt h1 gt Some title lt  h1 gt            This will be renered only if showContent prop is true        this props showContent  amp  amp           lt div gt             lt p gt something here lt  p gt             lt p gt more here lt  p gt             lt p gt and more here lt  p gt           lt  div gt               lt  div gt

User · Answer

There is another solution  if component for React   var Node   require  react-if-comp        render  function         return            lt div id  page  gt               lt Node if  this state banner                    then   lt div id  banner  gt  this state banner  lt  div gt     gt               lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt

User · Answer

amp  amp    code-style   small components  This simple test syntax   code-style convention   small focused components is for me the most readable option out there  You just need to take special care of falsy values like false  0 or      render  function         var person            var counter            return           lt div className  component  gt             person  amp  amp                 lt Person person  person   gt                           typeof counter      undefined    amp  amp                 lt Counter value  counter   gt                       lt  div gt             do notation  ES7 stage-0 do notation syntax is also very nice and I ll definitively use it when my IDE supports it correctly   const Users     users     gt       lt div gt       users map user   gt         lt User key  user id  user  user   gt            lt  div gt       const UserList     users     gt  do     if   users   lt div gt Loading lt  div gt    else if   users length   lt div gt Empty lt  div gt    else  lt Users users  users   gt        More details here  ReactJs - Creating an  quot If quot  component    a good idea

User · Answer

You can conditionally include elements using the ternary operator like so   render  function              return  lt div id  page  gt                       conditional statement                    this state banner    lt div id  banner  gt  this state banner  lt  div gt    null                      lt div id  other-content  gt                        blah blah blah                       lt  div gt                   lt  div gt

User · Answer

I don t think this has been mentioned  This is like your own answer but I think it s even simpler  You can always return strings from the expressions and you can nest jsx inside expressions  so this allows for an easy to read inline expression   render  function          return            lt div id  page  gt               this state banner    lt div id  banner  gt  this state banner  lt  div gt                     lt div id  other-content  gt                  blah blah blah                 lt  div gt           lt  div gt              x000D   x000D   lt script src  http   dragon ak fbcdn net hphotos-ak-xpf1 t39 3284-6 10574688 1565081647062540 1607884640 n js  gt  lt  script gt  x000D   lt script src  http   dragon ak fbcdn net hphotos-ak-xpa1 t39 3284-6 10541015 309770302547476 509859315 n js  gt  lt  script gt  x000D   lt script type  text jsx harmony true  gt void function      use strict   x000D   x000D  var Hello   React createClass   x000D    render  function     x000D      return   x000D         lt div id  page  gt  x000D           this props banner    lt div id  banner  gt  this props banner  lt  div gt        x000D           lt div id  other-content  gt  x000D            blah blah blah    x000D           lt  div gt  x000D         lt  div gt  x000D            x000D      x000D      x000D   x000D  var element    lt div gt  lt Hello   gt  lt Hello banner  banner   gt  lt  div gt   x000D  React render element  document body   x000D   x000D      lt  script gt  x000D   x000D   x000D

[javascript] How to have conditional elements and keep DRY with Facebook React's JSX?

Examples related to javascript

Examples related to reactjs

Examples related to react-jsx