Is it possible to use if else statement in React render function

Question

Basically  I have a react component  its render   function body is as below   It is my ideal one  which means it currently does not work   render        return            lt div gt               lt Element1  gt               lt Element2  gt                 note  code does not work here             if  this props hasImage   lt MyImage   gt              else  lt OtherElement  gt           lt  div gt

User · Answer

If you want a condition to show elements, you can use something like this.

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

Then call the helping method inside render function.

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

Or you can use another way of condition inside return.

{this.props.hasImage ? <element1> : <element2>}

User · Answer

You can also use conditional  ternary  operator inside conditional operator in case you have 2 different dependencies      launch success         lt span className  bg-green-100  gt      Success    lt  span gt         upcoming             lt span className  bg-teal-100  gt        Upcoming      lt  span gt             lt span className  bg-red-100  gt        Failed      lt  span gt

User · Answer

Type 1  If statement style   props hasImage  amp  amp      lt MyImage   gt         Type 2  If else statement style      props hasImage           lt MyImage   gt            lt OtherElement  gt

User · Answer

Not exactly like that  but there are workarounds  There s a section in React s docs about conditional rendering that you should take a look  Here s an example of what you could do using inline if-else   render       const isLoggedIn   this state isLoggedIn    return        lt div gt         isLoggedIn              lt LogoutButton onClick  this handleLogoutClick    gt                       lt LoginButton onClick  this handleLoginClick    gt                lt  div gt           You can also deal with it inside the render function  but before returning the jsx    if  isLoggedIn      button    lt LogoutButton onClick  this handleLogoutClick    gt     else     button    lt LoginButton onClick  this handleLoginClick    gt      return      lt div gt       lt Greeting isLoggedIn  isLoggedIn    gt       button     lt  div gt       It s also worth mentioning what ZekeDroid brought up in the comments  If you re just checking for a condition and don t want to render a particular piece of code that doesn t comply  you can use the  amp  amp  operator     return        lt div gt         lt h1 gt Hello  lt  h1 gt         unreadMessages length  gt  0  amp  amp           lt h2 gt            You have  unreadMessages length  unread messages           lt  h2 gt               lt  div gt

User · Answer

You should Remember about TERNARY operator          so your code will  be like this   render        return            lt div gt               lt Element1  gt               lt Element2  gt                 note  code does not work here                               this props hasImage       if has image                 lt MyImage   gt                return My image tag                                   lt OtherElement  gt            otherwise return other element                            lt  div gt

User · Answer

Try going with Switch case or ternary operator render        return            lt div gt               lt Element1  gt               lt Element2  gt                 updated code works here                    gt                            switch  this props hasImage                                case  this props hasImage                                   return  lt MyImage   gt                               default                                  return                                       lt OtherElement  gt                                                                                                    lt  div gt           This worked for me and should work for you else  Try Ternary Operator

User · Answer

There actually is a way to do exactly what OP is asking  Just render and call an anonymous function like so   render        return        lt div gt               gt            if  someCase              return                lt div gt someCase lt  div gt                        else if  otherCase              return                lt div gt otherCase lt  div gt                        else             return                lt div gt catch all lt  div gt                                         lt  div gt

User · Answer

If you need more than one condition  so you can try this out  https   www npmjs com package react-if-elseif-else-render  import   If  Then  ElseIf  Else   from  react-if-elseif-else-render    class Example extends Component      render         var i   3     it will render   lt p gt Else lt  p gt       return          lt If condition  i    1  gt           lt Then gt             lt p gt Then  1 lt  p gt           lt  Then gt           lt ElseIf condition  i    2  gt             lt p gt ElseIf  2 lt  p gt           lt  ElseIf gt           lt Else gt             lt p gt Else lt  p gt           lt  Else gt         lt  If gt

User · Answer

I used ternary operator and it s working fine for me                           item lotNum    null     PDF    item lotNum

User · Answer

You can render anything using the conditional statement like if  else     render         const price   this state price      let comp       if  price           comp    lt h1 gt Block for getting started with  this state price  lt  h1 gt         else          comp    lt h1 gt Block for getting started  lt  h1 gt              return          lt div gt           lt div className  gettingStart  gt             comp           lt  div gt         lt  div gt

User · Answer

If you want to use If  else if  and else then use this method             this state value     0                      lt Component1   gt                  this state value     1                    lt Component2   gt                                   lt Component3   gt

User · Answer

The shorthand for an if else structure works as expected in JSX  this props hasImage    lt MyImage   gt     lt SomeotherElement gt   You can find other options on this blogpost of DevNacho  but it s more common to do it with the shorthand  If you need to have a bigger if clause you should write a function that returns or component A or component B   for example   this setState  overlayHovered  true     renderComponentByState  overlayHovered        if overlayHovered            return  lt overlayHoveredComponent   gt       else          return  lt overlayNotHoveredComponent   gt            You can destructure your overlayHovered from this state if you give it as parameter  Then execute that function in your render   method   renderComponentByState this state

User · Answer

May be I m too late here  But I hope this would help someone  First separate those two elements    renderLogout     lt div gt      lt LogoutButton onClick  this handleLogoutClick    gt   lt div gt     renderLogin     lt div gt      lt LoginButton onClick  this handleLoginClick    gt   lt div gt      Then you can call these functions from render function using if else statement   render    if this state result     return this renderResult     else    return this renderQuiz         This works for me

[reactjs] Is it possible to use if...else... statement in React render function?

Examples related to reactjs