How to use switch statement inside a React component

Question

I have a React component  and inside the render method of the component I have something like this   render         return            lt div gt               lt div gt                     removed for brevity              lt  div gt                switch                         lt div gt                     removed for brevity              lt  div gt           lt  div gt             Now the point is that I have two div elements  one at the top and one at the bottom  that are fixed  In the middle I want to have a switch statement  and according to a value in my state I want to render a different component  So basically  I want the two div elements to be fixed always  and just in the middle to render a different component each time  I m using this to implement a multi-step payment procedure   Though  as is the code currently it doesn t work  as it gives me an error saying that switch is unexpected  Any ideas how to achieve what I want

User · Answer

That s happening  because switch statement is a statement  but here javascript expects an expression   Although  it s not recommended to use switch statement in a render method  you can use self-invoking function to achieve this   render            Don t forget to return a value in a switch statement     return            lt div gt                     gt                    switch                                    lt  div gt

User · Answer

You can t have a switch in render  The psuedo-switch approach of placing an object-literal that accesses one element isn t ideal because it causes all views to process and that can result in dependency errors of props that don t exist in that state    Here s a nice clean way to do it that doesn t require each view to render in advance   render        const viewState   this getViewState       return        lt div gt         viewState     ViewState NO RESULTS  amp  amp  this renderNoResults           viewState     ViewState LIST RESULTS  amp  amp  this renderResults           viewState     ViewState SUCCESS DONE  amp  amp  this renderCompleted         lt  div gt        If your conditions for which view state are based on more than a simple property     like multiple conditions per line  then an enum and a getViewState function to encapsulate the conditions is a nice way to separate this conditional logic and cleanup your render

User · Answer

Here is a full working example using a button to switch between components  you can set a constructor as following   constructor props        super props       this state           currentView               then you can render components as following     render          const switchView        gt         switch this state currentView                case  settings     return  lt h2 gt settings lt  h2 gt         case  dashboard     return  lt h2 gt dashboard lt  h2 gt          default       return  lt h2 gt dashboard lt  h2 gt                 return            lt div gt                lt button onClick   e    gt  this setState  currentView   settings     gt settings lt  button gt               lt button onClick   e    gt  this setState  currentView   dashboard     gt dashboard lt  button gt                lt div className  container  gt                    switchView                  lt  div gt             lt  div gt                As you can see I am using a button to switch between states

User · Answer

I was not absolutely happy with any of the answers  But I have picked up some ideas from  Matt Way  Here is my solution  Definitions  const Switch   props   gt        const   test  children   null     props      return children  amp  amp  children find child   gt  child  amp  amp  child props  amp  amp  child props casevalue     test     null     const Case      casevalue   false  children   null      gt   lt div casevalue     casevalue    gt  children  lt  div gt    Case propTypes         casevalue  PropTypes string isRequired      children  PropTypes node isRequired     const Default      children      gt  children     lt h1 gt NO RESULT lt  h1 gt    const SwitchCase      test  cases       defaultValue   null      gt         const defaultVal   defaultValue          amp  amp  React cloneElement defaultValue    key   default-key   casevalue     test                  lt Default key  default-key  casevalue     test      gt        return            lt Switch test     test     gt                                cases map  cas  i    gt                        const   props          cas                            const   casevalue   false     rest     props                              return  lt Case key   case-key-  i    casevalue     casevalue    gt   React cloneElement cas  rest   lt  Case gt                                      concat defaultVal                         lt  Switch gt            Usage   lt SwitchCase   cases         lt div casevalue     false    gt  1 lt  div gt        lt div casevalue     true    gt  2 lt  div gt        lt div casevalue     false    gt  3 lt  div gt          defaultValue   lt h1 gt    nothing to see here lt  h1 gt      You can leave it blank    test     true      gt

User · Answer

I really liked the suggestion in https   stackoverflow com a 60313570 770134  so I adapted it to Typescript like so import React    FunctionComponent   from  react  import   Optional   from  quot typescript-optional quot   const   ofNullable     Optional  interface SwitchProps     test  string   defaultComponent  JSX Element    export const Switch  FunctionComponent lt SwitchProps gt     props    gt      return ofNullable props children       map  children    gt          return ofNullable  children as JSX Element    find  child    gt  child props  value       props test            orElse props defaultComponent              orElseThrow      gt  new Error  Children are required for a switch component       const Foo      value    quot foo quot       gt   lt div gt foo lt  div gt   const Bar      value    quot bar quot       gt   lt div gt bar lt  div gt   const value    quot foo quot   const SwitchExample    lt Switch test  value  defaultComponent   lt div   gt   gt     lt Foo   gt     lt Bar   gt   lt  Switch gt

User · Answer

I did this inside the render   method     render         const project        gt          switch this projectName             case  one     return  lt ComponentA   gt           case  two     return  lt ComponentB   gt           case  three   return  lt ComponentC   gt           case  four    return  lt ComponentD   gt            default       return  lt h1 gt No project match lt  h1 gt                     return          lt div gt   project     lt  div gt              I tried to keep the render   return clean  so I put my logic in a  const  function right above  This way I can also indent my switch cases neatly

User · Answer

Try this  which is way cleaner too  Get that switch out of the render in a function and just call it passing the params you want  For example    x000D   x000D  renderSwitch param    x000D    switch param    x000D      case  foo   x000D        return  bar   x000D      default  x000D        return  foo   x000D      x000D    x000D   x000D  render     x000D    return   x000D       lt div gt  x000D         lt div gt  x000D               removed for brevity x000D         lt  div gt  x000D         this renderSwitch param   x000D         lt div gt  x000D               removed for brevity x000D         lt  div gt  x000D       lt  div gt  x000D       x000D    x000D   x000D   x000D

User · Answer

This is another approach   render        return  this  renderStep  this state step        renderStep0     return  step 0    renderStep1     return  step 1

User · Answer

How about   mySwitchFunction    param    gt       switch  param          case  A            return                 lt div   gt                         etc           render         return           lt div gt             lt div gt                    removed for brevity            lt  div gt               this mySwitchFunction param                lt div gt                   removed for brevity            lt  div gt         lt  div gt

User · Answer

function Notification   text  status        return        lt div gt               gt            switch  status              case  info               return  lt Info text  text    gt             case  warning               return  lt Warning text  text    gt             case  error               return  lt Error text  text    gt             default              return null                             lt  div gt

User · Answer

A way to represent a kind of switch in a render block  using conditional operators    someVar     1  amp  amp       lt SomeContent  gt       someVar     2  amp  amp       lt SomeOtherContent   gt       this props someProp      quot something quot   amp  amp       lt YetSomeOtherContent   gt       this props someProp      quot foo quot   amp  amp  this props someOtherProp      quot bar quot   amp  amp       lt OtherContentAgain   gt           lt SomeDefaultContent   gt     It should be ensured that the conditions strictly return a boolean

User · Answer

You can do something like this     lt div gt              object map  item  index    gt  this getComponent item  index       lt  div gt   getComponent item  index        switch  item type          case  1           return  lt Comp1  gt        case  2           return  lt Comp2  gt        case  3           return  lt Comp3   gt

User · Answer

I m not a big fan of any of the current answers  because they are either too verbose  or require you to jump around the code to understand what is going on  I prefer doing this in a more react component centred way  by creating a  lt Switch  gt   The job of this component is to take a prop  and only render children whose child prop matches this one  So in the example below I have created a test prop on the switch  and compared it to a value prop on the children  only rendering the ones that match  Example   x000D   x000D  const Switch   props   gt      const   test  children     props      filter out only children with a matching prop   return children find child   gt        return child props value     test               const Sample   props   gt      const someTest   true   return        lt Switch test  someTest  gt         lt div value  false  gt Will display if someTest is false lt  div gt         lt div value  true  gt Will display if someTest is true lt  div gt       lt  Switch gt         ReactDOM render     lt Sample  gt     document getElementById  react      x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt   lt div id  react  gt  lt  div gt  x000D   x000D   x000D   You can make the switch as simple or as complex as you want  Don t forget to perform more robust checking of the children and their value props

User · Answer

In contrast to other answers  I would prefer to inline the  switch  in the render function  It makes it more clear what components can be rendered at that position   You can implement a switch-like expression by using a plain old javascript object   render        return        lt div gt         lt div gt              removed for brevity            lt  div gt                               foo    lt Foo   gt              bar    lt Bar   gt            param                 lt div gt              removed for brevity            lt  div gt       lt  div gt

User · Answer

lenkan s answer is a great solution    lt div gt       beep   lt div gt Beep lt  div gt        boop   lt div gt Boop lt  div gt      greeting    lt  div gt    If you need a default value  then you can even do   lt div gt       beep   lt div gt Beep lt  div gt        boop   lt div gt Boop lt  div gt      greeting      lt div gt Hello world lt  div gt    lt  div gt    Alternatively  if that doesn t read well to you  then you can do something like   lt div gt           rswitch greeting          beep   lt div gt Beep lt  div gt         boop   lt div gt Boop lt  div gt         default   lt div gt Hello world lt  div gt               lt  div gt    with  function rswitch  param  cases      if  cases param         return cases param      else       return cases default

[reactjs] How to use switch statement inside a React component?

Examples related to reactjs