loading...
Cover image for Conditional rendering:  React 🚀

Conditional rendering: React 🚀

viraj profile image Viraj Nimbalkar ・2 min read

What is Conditional rendering?

  • Conditional rendering is the ability to render different UI markup based on certain conditions.
  • It is a way to render different elements or components based on a condition
  • Conditional rendering in React works the same way conditions work in JavaScript.

What are the types of Conditional rendering?

  1. if/else
  2. Element Variables
  3. Ternary Conditional Operator
  4. Short Circuit Operator

1. if/else:

  • if/else cannot be used inside return statement and JSX
  • You can use if/else statement in render()
  • Instead of this, you can use use ternary operator or logical && operator
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      userIsViraj : true,
    }
  }

  render() {

    if(this.state.userIsViraj){
      return(
        <div>Welcome Viraj!</div>
      )
    } else{
      return(
        <div>Welcome Guest!</div>
      )
    }

  }
}

export default Conditional;
Enter fullscreen mode Exit fullscreen mode

2. Element Variables:

  • Element variables is a simple variable which can hold the JSX element and it can be rendered when required.
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      isUserViraj : true,
    }
  }

  render() {

    let user
    if (this.state.isUserViraj) {
      user = <div>Welcome Viraj!</div>
    } else{
      user = <div>Welcome Guest!</div>
    }

    return(
      <div>{user}</div>
    )

  }
}

export default Conditional;
Enter fullscreen mode Exit fullscreen mode

3. Ternary Conditional Operator:

  • You can use JavaScript in JSX, but it becomes difficult when using statements like if, else within JSX.
  • Hence, if you want to use if/else statement in JSX then you can use ternary conditional operator
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      userIsViraj : true,
    }
  }

  render() {
    return (
      <div>
        { this.state.userIsViraj ? (
          <div> Welcome Viraj! </div>
        ) :
        <div> Welcome Guest! </div> 
        }
      </div>
    )
  }
}

export default Conditional;
Enter fullscreen mode Exit fullscreen mode

4. Short Circuit Operator:

  • Short Circuit Operator includes the JavaScript logical && operator.
  • Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
import React, { Component } from 'react'

class Conditional extends Component {

  constructor (props){
    super(props)
    this.state = {
      isUserViraj : true,
    }
  }

  render() {
    return (
      <div>
        { this.state.isUserViraj && 
          <div> 
            Welcome Viraj!
          </div> }
      </div>
    )
  }
}

export default Conditional;
Enter fullscreen mode Exit fullscreen mode

Here, the message "Welcome Viraj!" will render only if this.state.isUserViraj is true otherwise it will render nothing.

Discussion

pic
Editor guide
Collapse
harshhhdev profile image
Harsh Singh

Really good tutorial. Helped me better my simple understanding of React.

Collapse
viraj profile image
Viraj Nimbalkar Author

Thank You 😀

Collapse
alfredosalzillo profile image
Alfredo Salzillo

Please add the JavaScript tag to the codebooks

Collapse
viraj profile image
Collapse
fakorededamilola profile image
Fakorede Damilola

{this.state.isUserViraj &&


Welcome Viraj!

}

Lovely article, thank you.

Collapse
viraj profile image
Viraj Nimbalkar Author

Thank You 😃