Quick Contact


    Conditional Rendering

    Condition Rendering is used to represent output by applying conditions in code with three different approached which is fetched while rendering of code. Suppose we have a code with following condition-:

    If user is logged in then display ‘you’re welcome’ if not logged in then display ‘Welcome guest’

    		Import React, {component} from ‘react’
    		Class Ducat extends Component {
    		       Constructor (props){
    		        Super (props)
    		      This.state = {
    		          Isloggedin: true
    		}
    		}
    		Render() {
    		Return (
    		< div>you’re welcome< /div>
    		< div>welcome guest< /div>
    		}}
    		Export default greetings
    	

    For Example we put conditions on code with three different approaches.

    • First Approach-:
      If-Else is first approach. Using If-Else in JSX is not valid so use it outside JSX code as-:
      				Render() {
      				Let message
      				If (this.state.isloggedIn)
      				{
      				Message = < div>you’re welcome< /div>
      				}
      				Else {
      				Message = < div>Welcome Guest< /div>
      				}
      			
    • Second Approach
      Elements Variable- Use JavaScript variables to store elements as-:
      				Render() {
      				  Return (
      				this.state.isloggedIn ? 
      				   < div>You’re Welcome< /div>:
      				< div> Welcome Guest < /div>
      				)
      			
    • Third Approach
      Ternary conditional operator- Here conditional operator is used. It can be easily used in JSX as-:
      				Render() {
      				  Return this.state.isloggedin ? (
      				< div>You’re Welcome < /div>
      				) : (
      				< div>Welcome Guest< /div>
      				)
      			
    • Fourth Approach
      Short Circuit Operator- This Approach is just specific case of ternary conditional operator. You must render something or nothing using short circuit approach.

      Render() {

      This.state.isloggedin $$ < div>you’re Welcome

      Here first evaluate left side of operator, if it is true then it evaluate right side condition.

      There are more factors in Conditional rendering-:

    Prevent rendering with Null

    Advantage of returning “null” instead of empty element is that performance will be improved of the app because react wont Unmount component to replace.

    		renderInputField() {
    		   if(this.state.mode === ‘view’) {
    		    return null;
    		} else {
    		Return (
    		< p>
    		< input
    		onChange={this.handleChange}
    		value={this.state.inputText}
    		/>
    		< /p>
    		);
    		}}
    	
    React Element Variables

    If you don’t want more than one return statement so to avoid writing return Statement again and again use a variable to store the JSX elements and only initialize it when condition is “true”

    As-:

    		As-:
    		renderInputField() {
    		 let input;
    		if(this.state.mode !== ‘view’) {
    		input =
    		< p>
    		< input
    		onChange={this.handleChange}
    		value={this.state.inputText}/>
    		
    		}
    		Return input;
    		}
    		renderButton() {
    		let button;
    		if(this.state.mode === ‘view’) {
    		button =
    		    < button onClick = {this.handleSave}>
    		        Save
    		< /button>
    		}
    		 Return button;
    		}
    	

    Copyright 1999- Ducat Creative, All rights reserved.