
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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 div>
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}/> p> } Return input; } renderButton() { let button; if(this.state.mode === ‘view’) { button = < button onClick = {this.handleSave}> Save < /button> } Return button; }
Apply now for Advanced React Js Course