React: Conditional Rendering

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