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

There actually is a way to do exactly what OP is asking. Just render and call an anonymous function like so:

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

Four ways of conditional rendering

(In functional component's return statement or class component's render function's return statement)

Ternary operator

return (
    <div>     
        {
            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </div>
)

Note: Only if the condition 'a'==='a' is true, <p>Hi</p> will be rendered in the screen. Otherwise, <p>Bye</p> will be rendered on the screen.

Logical operator

AND &&

return (
    <div>     
        {
            'a'==='a' && <p>Hi</p>
        } 
    </div>
)

Note: Only if the condition 'a'==='a' is true, <p>Hi</p> will be rendered in the screen.

OR ||

export default function LogicalOperatorExample({name, labelText}) {
    
  return (
    <div>       
         {labelText || name}      
    </div>
  )
}

Note: If labelText and name both props are passed into this component, then labelText will be rendered in the screen. But if only one of them (name or labelText ) is passed as prop, then that passed prop will be rendered in the screen.

if, else, else if

return ( 
        <div>     
            {
                (() => {
                    if('a'==='b') {
                            return (
                                <p>Hi</p>
                            )
                        } else if ('b'==='b') {
                            return (
                            <p>Hello</p>
                            )
                        } else {
                            return (
                                <p>Bye</p>
                            )
                        }
                })()  
            }  
        </div>  
    )

Note: Have to use an anonymous functions (also need to immediately invoke the function )

Switch statement

return ( 
    <div>     
        {
            (() => {
                switch(true) {
                        
                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;
                        
                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;
                    
                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </div>  
)

Note: Have to use an anonymous functions (also need to immediately invoke the function)

For only if:

{condition1 && 
(<div> condition1 true </div>)}

For if and else:

{condition1 ? 
(<div> condition1 true </div>)
:(<div> condition1 false </div>)}

For if, else if, and else:

{condition1 ? 
(<div>condition1 true</div>)
:(condition2) ? 
(<div>condition2 true</div>)
:(<div>both conditions false</div>)}

You can render anything using the conditional statement like if, else :

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

Type 1: If statement style

{props.hasImage &&

  <MyImage />

}

Type 2: If else statement style

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

You should Remember about TERNARY operator

:

so your code will be like this,

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

The shorthand for an if else structure works as expected in JSX

this.props.hasImage ? <MyImage /> : <SomeotherElement>

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 <OverlayHoveredComponent />
    }else{
        return <OverlayNotHoveredComponent />
    }
}

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)

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 '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}

You can also use conditional (ternary) operator inside conditional operator in case you have 2 different dependencies.

{
(launch_success)
  ?
  <span className="bg-green-100">
    Success
  </span>
  :
  (upcoming)
    ?
    <span className="bg-teal-100">
      Upcoming
    </span>
    :
    <span className="bg-red-100">
      Failed
    </span>
}

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>}

Lot's of great answers, however I haven't seen the use of an object for mapping to different views

const LOGS = {
  info: <Info />,
  warning: <Warning />,
  error: <Error />,
};
 
const Notification = ({ status }) => <div>{LOGS[status]}</div>

I used a ternary operator and it's working fine for me.

{item.lotNum == null ? ('PDF'):(item.lotNum)}

None of the answers mention the short-circuit method

{this.props.hasImage && <MyImage />}

Granted you cannot use it if you want to render something on the else logic. I learned about this on react by example

on a deeper scan I do see a comment by @ZekeDroid, but I will drop this as an answer since it could be useful.

Shorthand for if then

 { condition ? <Element1/> : null }

Yes you can use condition in JSX render. You can read more here.

Syntax:

condition ? exprIfTrue : exprIfFalse

Condition statement must be this way below, here an example:

return (
    <div>
      {condition  ? (
        //do some actions if condition is true
      ) : (
        //do some actions if condition is false
      )}
    </div>
)

May be I'm too late here. But I hope this would help someone. First separate those two elements.

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

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. :)

Try going with Switch case or ternary operator

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // updated code works here
            {(() => {
                        switch (this.props.hasImage) {
                            case (this.props.hasImage):
                                return <MyImage />;
                            default:
                                return (
                                   <OtherElement/>; 
                                );
                        }
                    })()}
        </div>
    )
}

This worked for me and should work for you else. Try Ternary Operator

If you want to use If, else if, and else then use this method

           {this.state.value === 0 ? (
                <Component1 />
            ) : this.state.value === 1 ? (
              <Component2 />
            ) : (
              <Component3 />
            )}

You can introduce separate method that will return div elements and call it inside of return. I use this case for example for error rendering depends on status, such as:

const renderError = () => {
    if (condition)
        return ....;
    else if (condition)
        return ....;
    else if (condition)
        return ....;
    else
        return ....;
}

render(){
   return (
     <div>
      ....
      {renderError()}
     </div>
   );
}

I don't think i saw this solution for an inline else if rendering where you have more that 2 conditions so i'm sharing it :

{variable == 0 ?
  <Element1/>
:variable == 1 ?
  <Element2/>
:variable == 2 ?
  <Element3/>
:
  <Element4/>
}

I found that a solution that I thought was better than having an if-else. Instead have 2 return statements. See example:

render() {
    const isLoggedIn = this.state.isLoggedIn;

    if (isLoggedIn) {
        return <LogoutButton onClick={this.handleLogoutClick} />
    }

    // This will never occur if the user is logged in as the function is returned before that.
    return <LoginButton onClick={this.handleLoginClick} />
}

This is less cluttered than having an if-else or ternary operator in your return statement.

You can write If statement component too. Here is what I use in my project.

components/IfStatement.tsx

import React from 'react'

const defaultProps = {
    condition: undefined,
}

interface IfProps {
    children: React.ReactNode
    condition: any
}

interface StaticComponents {
    Then: React.FC<{ children: any }>
    Else: React.FC<{ children: any }>
}

export function If({ children, condition }: IfProps): any & StaticComponents {
    if (React.Children.count(children) === 1) {
        return condition ? children : null
    }

    return React.Children.map(children as any, (element: React.ReactElement) => {
        const { type: Component }: any = element

        if (condition) {
            if (Component.type === 'then') {
                return element
            }
        } else if (Component.type === 'else') {
            return element
        }

        return null
    })
}

If.defaultProps = defaultProps

export function Then({ children }: { children: any }) {
    return children
}

Then.type = 'then'

export function Else({ children }: { children: any }) {
    return children
}

Else.type = 'else'

If.Then = Then as React.FC<{ children: any }>
If.Else = Else as React.FC<{ children: any }>

export default If

Usage example:

<If condition={true}>
   <If.Then>
        <div>TRUE</div>
   </If.Then>
   <If.Else>
        <div>NOT TRUE</div>
   </If.Else>
</If>

It may be late to answer this question, but I think people still face this issue. Recently, I just created a library to solve this issue. Please give it a try.

Here is the link. https://www.npmjs.com/package/condition-switch

The following code can handle this issue with this library.

return (
  <div>
    {condSwitch(
      [
        [condition === 'A', () => <div>Condition A</div>],
        [condition === 'B', () => <div>Condition B</div>],
        [condition === 'C', () => <div>Condition C</div>],
      ],
      <div>Default Condition</div>,
    )}
  </div>
);

Below Code you can use for If condition on react in side return

                                    {(() => {if (true) {return ( <div><Form>
                                        <Form.Group as={Row} style={{ marginLeft: '15px', marginRight: '15px', marginBlock: '0px' }} >
                                            <Form.Label className="summary-smmdfont" style={{ flex: '1 0 auto', marginBlock: '0px' }}>   uyt</Form.Label>
                                            <Form.Label className="summary-smmdfont"style={{ textAlignLast: 'Right', flex: '1 0 auto', marginBlock: '0px' }}>
                                                09</Form.Label>
                                        </Form.Group>
                                        </Form>

                                    </div>);
                    }})()}