if-else statement inside jsx ReactJS

Question

I need to change render function and run some sub render function when a specific state given    For example   render         return               lt View style  styles container  gt              if  this state     news                    return                        lt Text gt data lt  Text gt                                           lt  View gt            How can I implement that without changing scenes  I will use tabs to change content dynamically

User · Answer

You can do this  Just don t forget to put  return  before your JSX component    Example   render         if this state page      news             return  lt Text gt This is news page lt  Text gt         else           return  lt Text gt This is another page lt  Text gt             Example to fetch data from internet   import React    Component   from  react   import       View      Text   from  react-native    export default class Test extends Component       constructor props            super props            this state                 bodyText                          fetchData             fetch  https   example com   then  resp    gt                this setState                   bodyText  resp  bodyText                                        componentDidMount             this fetchData               render             return  lt View style    flex  1    gt               lt Text gt  this state bodyText  lt  Text gt           lt  View gt

User · Answer

render          return                lt View style  styles container  gt                 gt                                                                        if  this state     news                     return   lt Text gt data lt  Text gt                            else               return   lt Text gt  lt  Text gt                         lt  View gt              https   react-cn github io react tips if-else-in-JSX html

User · Answer

You can achieve what you are saying by using Immediately Invoked Function Expression  IIFE  render         return               lt View style  styles container  gt                     gt                  if  this state     news                      return                          lt Text gt data lt  Text gt                                                                   return null                             lt  View gt           Here is the working example   But  In your case  you can stick with the ternary operator

User · Answer

What about switch case instead of if-else   render         switch  this state route          case  loginRoute           return                lt Login changeRoute  this changeRoute                changeName  this changeName                changeRole  this changeRole    gt                   case  adminRoute           return                lt DashboardAdmin               role  this state role                name  this state name                changeRoute  this changeRoute                gt                   default           return  lt  gt  lt   gt

User · Answer

I do like this and its working fine   constructor        super        this state         status true         render        return           this state status     true               lt TouchableHighlight onPress      gt this hideView    gt                lt View style  styles optionView  gt                  lt Text gt Ok Fine    lt  Text gt                lt  View gt             lt  TouchableHighlight gt                           lt Text gt Ok Fine  lt  Text gt                 hideView      this setState       home  this state status

User · Answer

In two ways we can solve this problem    Write a else condition by adding just empty  lt div gt  element  or else return null    render         return               lt View style  styles container  gt              if  this state     news                    return                        lt Text gt data lt  Text gt                                               else                     lt div gt   lt  div gt                          lt  View gt

User · Answer

There s a Babel plugin that allows you to write conditional statements inside JSX without needing to escape them with JavaScript or write a wrapper class   It s called JSX Control Statements    lt View style  styles container  gt     lt If condition   this state     news    gt       lt Text gt data lt  Text gt     lt  If gt   lt  View gt    It takes a bit of setting up depending on your Babel configuration  but you don t have to import anything and it has all the advantages of conditional rendering without leaving JSX which leaves your code looking very clean

User · Answer

I find this way is the nicest    this state yourVariable      news   amp  amp   lt Text gt  data  lt Text  gt

User · Answer

Simple example of nested loop with if condition in React  Data example      menus         id 1  name  quot parent1 quot   pid  0        id 2  name  quot parent2 quot   pid  0        id 3  name  quot parent3 quot   pid  0        id 4  name  quot parent4 quot   pid  0        id 5  name  quot parent5 quot   pid  0        id 6  name  quot child of parent 1 quot   pid  1        id 7  name  quot child of parent 2 quot   pid  2        id 8  name  quot child of parent 2 quot   pid  2        id 9  name  quot child of parent 1 quot   pid  1        id 10  name  quot Grand child of parent 2 quot   pid  7        id 11  name  quot Grand child of parent 2 quot   pid  7        id 12  name  quot Grand child of parent 2 quot   pid  8        id 13  name  quot Grand child of parent 2 quot   pid  8        id 14  name  quot Grand child of parent 2 quot   pid  8        id 15  name  quot Grand Child of Parent 1  quot   pid  9        id 15  name  quot Child of Parent 4  quot   pid  4           Nested Loop and Condition      render         let subMenu         let ssubmenu         const newMenu   this state menus map  menu   gt       if  menu pid     0       return        lt ul key  menu id  gt          lt li gt             menu name             lt ul gt                subMenu   this state menus map  smenu    gt                 if  menu id     smenu pid                               return                 lt li gt                   smenu name                   lt ul gt                      ssubmenu   this state menus map  ssmenu   gt                      if smenu id     ssmenu pid                                          return                      lt li gt                         ssmenu name                      lt  li gt                                                                                                        lt  ul gt                lt  li gt                                                            lt  ul gt          lt  li gt       lt  ul gt                         return        lt div gt          newMenu       lt  div gt

User · Answer

You can t provide if-else condition in the return block  make use of ternary block  also this state will be an object  you shouldn t be comparing it with a value  see which state value you want to check  also return returns only one element  make sure to wrap them in a View  render         return          lt View style  styles container  gt         this state page      news    lt Text gt data lt  Text gt   null         lt  View gt

User · Answer

Just Tried that  return     lt  gt              main-condition-1  amp  amp         main-condition-2  amp  amp         sub-condition     lt p gt Hi lt  p gt       lt p gt Hello lt  p gt              lt   gt     Let me know what you guys think

User · Answer

lt Card style    backgroundColor    ffffff   height  150  width  250  paddingTop  10    gt                                                            lt Text style  styles title  gt       item lastName    item firstName    item title   lt  Text gt                                lt Text  gt      Email   item email  lt  Text gt                               item lastLoginTime    null    lt Text  gt      Last Login   item lastLoginTime  lt  Text gt     lt Text  gt      Last Login  None lt  Text gt                                item lastLoginTime    null    lt Text  gt      Status  Active lt  Text gt     lt Text  gt      Status  Inactive lt  Text gt                                                        lt  Card gt

User · Answer

For this we can use ternary operator or if there is only one condition then   amp  amp   operator  Like this -    This is for if else  render      return           lt View style  styles container  gt         this state     news                 lt Text gt data lt  Text gt            null       lt  View gt           This is only for if or only for one condition  render      return           lt View style  styles container  gt         this state     news    amp  amp              lt Text gt data lt  Text gt                 lt  View gt

User · Answer

As per DOC      if-else statements don t work inside JSX  This is because JSX is just   syntactic sugar for function calls and object construction    Basic Rule      JSX is fundamentally syntactic sugar  After compilation  JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects  We can embed any JavaScript expression in JSX by wrapping it in curly braces    But only expressions not statements  means directly we can not put any statement  if-else switch for  inside JSX     If you want to render the element conditionally then use ternary operator  like this   render         return               lt View style  styles container  gt               this state value     news    lt Text gt data lt  Text gt   null            lt  View gt            Another option is  call a function from jsx and put all the if-else logic inside that  like this   renderElement       if this state value     news         return  lt Text gt data lt  Text gt      return null     render         return               lt View style  styles container  gt                this renderElement              lt  View gt

[javascript] if-else statement inside jsx: ReactJS

Examples related to javascript

Examples related to reactjs

Examples related to react-native