Conditional Rendering in React Complete Guide with Examples 2026

Image
  Conditional Rendering in React Conditional Rendering is one of the most useful concepts in React. It means showing different content on the screen depending on a condition. For example: If a user is logged in → show Logout If a user is not logged in → show Login If a student has passed → show Congratulations If a product is available → show Buy Now If data is loading → show Loading... React does not have a separate if rendering tag. Instead, we use normal JavaScript conditions such as if, the ternary operator, &&, and switch to decide what should appear in the UI.

JavaScript switch statement

     JavaScript Switch  Statement 


JavaScript switch statement


what is the switch case statement in javascript language?

1] switch case  number of codition.
2] switch case one code execute and handle multiple  condition in javaScript .
3] switch case alternative series provides else if and else JavaScript.
4] Switch case check to the single value multiple possible case.
5] Switch case match to the condition  inside the case than block executed and /end the conditon .
6] Switch case  in case statement is not match then condition default block executed.

Syntax Switch Statement  


switch (expression)
{
case value1: 
// code executed
 // if expression  == value1
break;

case value2: 
// code executed
 // if expression  == value2
break;

case value3: 
// code executed
 // if expression  == value3
break;

case value N: 
// code executed
 // if expression  == value N
break;

default:
//code executed if expression does not match any case 
}

Q.  switch case  Program of day 

Example :-
Source code 

let day =5;
switch(day)
{
    case 0:
        console.log('Sunday');
        break;
        case 1:
            console.log('Monday');
            break;
            case 2:
        console.log('Tuesday');
        break;
        case 3:
            console.log('Wednesday');
            break;
            case 4 :
        console.log('Thursday');
        break;
        case 5:
            console.log('Friday');
            break;

            case 6:
            console.log('Saturday');
            break;
            default:
                console.log('invalid day')

}

OutPut :-


Q2] . Switch case  program of month 

 Example 

source code


let month = 9;
switch(month)
{
    case 0:
        console.log('January');
        break;
        case 1:
            console.log('February');
            break;
            case 2:
        console.log('March');
        break;
        case 3:
            console.log('April');
            break;
            case 4 :
        console.log('May');
        break;
        case 5:
            console.log('June');
            break;

            case 6:
            console.log('July');
            break;
                case 7:
                        console.log('August');
                        break;
                        case 8:
                            console.log('September');
                            break;
                            case 9:
                        console.log('October');
                        break;
                        case 10:
                            console.log('November');
                            break;
                            case 11 :
                        console.log('December');
                        break;
                       default:
                      console.log('invalid Month')
               
            }

Output :-



Q3] . Switch case  program Programming language

 Example 

source code:-


let  language = "JS";
switch( language)
{
    case "H":
        console.log('HTML');
        break;
        case "C":
            console.log('CSS');
            break;
            case "J":
        console.log('Java');
        break;
        case "JS":
            console.log('JavaScript');
            break;
            case "P":
        console.log('PHP');
        break;
        case "C":
            console.log('C++');
            break;

            case "B":
            console.log('Bootstrap');
            break;
                 default:
                 console.log('invalid Programming language');
               
            }

Output :-




Related Post JAVASCRIP :-

Comments

Popular posts from this blog

HTML Tag

CSS Text Color Explained with Syntax and HTML Examples

HTML Input Type Submit Syntax and Example