Conditional rendering: React

Conditional rendering: React:

 

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(
        
Welcome Viraj!
) } else{ return(
Welcome Guest!
) } } } export default Conditional;

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 = 
Welcome Viraj!
} else{ user =
Welcome Guest!
} return(
{user}
) } } export default Conditional;

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 (
      
{ this.state.userIsViraj ? (
Welcome Viraj!
) :
Welcome Guest!
}
) } } export default Conditional;

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 (
      
{ this.state.isUserViraj &&
Welcome Viraj!
}
) } } export default Conditional;

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

from Tumblr https://generouspiratequeen.tumblr.com/post/635562631215955968

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s