Forem: yaswanth krishna

Condition Rendering React

yaswanth krishna — Mon, 27 Oct 2025 12:25:16 +0000

Condition Rendering ?

Conditional rendering allows dynamic control over which UI elements or content are displayed based on specific conditions. It is commonly used in programming to show or hide elements depending on user input, data states, or system status. This technique improves user experience by ensuring that only relevant information is presented at a given time. It enables components to display different outputs depending on states or props. This ensures that the UI updates dynamically based on logic instead of manually manipulating the DOM.

1. Using If/Else Statements

If/else statements allow rendering different components based on conditions. This approach is useful for complex conditions.

2. Using Ternary Operator

The ternary operator (condition ? expr1: expr2) is a concise way to conditionally render JSX elements. It’s often used when the logic is simple and there are only two options to render.

function Greeting({ isLoggedIn }) {
    return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;
}

If isLoggedIn is true: Welcome Back!
If isLoggedIn is false: Please Sign In

3. Using Logical AND (&&) Operator

The && operator returns the second operand if the first is true, and nothing if the first is false. This can be useful when you only want to render something when a condition is true.

function Notification({ hasNotifications }) {
    return <div>{hasNotifications && <p>You have new notifications!</p>}</div>;
}

If hasNotifications is true: You have new notifications!
If hasNotifications is false: Nothing is rendered.

4. Using Switch Case Statements

Switch case statements are useful when you need to handle multiple conditions, which would otherwise require multiple if conditions. This approach can be more readable if there are many conditions to check.

function StatusMessage({ status }) {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        case 'error':
            return <p>Error loading data.</p>;
        default:
            return <p>Unknown status</p>;
    }
}

If status is 'loading': Loading...
If status is 'success': Data loaded successfully!
If status is 'error': Error loading data.

5. Conditional Rendering in Lists (Using .map())

Conditional rendering can be helpful when rendering lists of items conditionally. You can filter or map over an array to selectively render components based on a condition.

const items = ["Apple", "Banana", "Cherry"];
const fruitList = items.map((item, index) =>
    item.includes("a") ? <p key={index}>{item}</p> : null
);

If the item contains letter "a", it will be displayed.

6. Conditional Rendering with Component State

You can also manage conditional rendering based on the component's state. For example, you can show a loading spinner until some data is fetched, and then display the actual content once the data is ready.

if (loading) {
  // Render Loading Component
} else {
  // Render Data Component
}

React Props ?

yaswanth krishna — Mon, 27 Oct 2025 05:34:52 +0000

Props Using in Reactjs

_In React (and similar frameworks like Vue or Svelte), props — short for properties — are a way to pass data from a parent component to a child component.

Think of them like function arguments, but for components._

Conceptually

Parent → Child communication
Immutable inside the child (the child cannot change them)
Allow components to be reusable and dynamic

// Parent Component
import Navbar from './assets/Navbar'
import Course from './Course'
import Footer from './Footer'


import './App.css';
import courseImg from './assets/1.jpg';
import coursesImg from './assets/2.jpg';
import coursessImg from './assets/3.jpg';
function App() {
  return (
    <>
      {/* <Navbar /> */}
      <Course name="HTML,Css" price="$100" image={courseImg} description="Html"  show={true}/>
      <Course name="JAVASCRIPT" price="$1100" image={coursesImg} description="javascript"show={true} />
      <Course name="reactjs " price="$120" image={coursessImg} description="REactjs"show={true} />


      {/* <Footer/> */}




    </>
  );
}

export default App;

// Child Component
import coursessImg from './assets/3.jpg'; 
 // 👈 Add this line at the top

function Course(props) {
    if (props.show==true)
    return (
        <div className="card">
            <img src={props.image} alt="" />
            <h4>{props.name}</h4>
            <h5>{props.price}</h5>
            <p>{props.description}</p>
        </div>
    );
}


export default Course;

Here:

_The parent passes a prop called name with the value "Alice".

The child receives it through the props object and uses props.name._

Using Destructuring (a common shorthand)

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

This does exactly the same thing — just cleaner.

React Key ?

yaswanth krishna — Mon, 27 Oct 2025 05:27:03 +0000

React Key Feature ?

React is one of the most demanding JavaScript libraries because it is equipped with a ton of features which makes it faster and production-ready. Below are the few features of React.

1. Virtual DOM

React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly, React:

Creates a lightweight copy of the DOM (Virtual DOM).
Compares it with the previous version to detect changes (diffing).
Updates only the changed parts in the actual DOM (reconciliation), improving performance.

2. Component-Based Architecture

React follows a component-based approach, where the UI is broken down into reusable components. These components:

Can be functional or class-based.
It allows code reusability, maintainability, and scalability.

3. JSX (JavaScript XML)

React usesJSX, a syntax extension that allows developers to write HTML inside JavaScript. JSX makes the code:

More readable and expressive.
Easier to understand and debug.

4. One-Way Data Binding

React uses one-way data binding, meaning data flows in a single direction from parent components to child components via props. This provides better control over data and helps maintain predictable behavior.

5. State Management

React manages component state efficiently using the useState hook (for functional components) or this.state (for class components). State allows dynamic updates without reloading the page.

6. React Hooks

Hooks allow functional components to use state and lifecycle features without needing class components. Common hooks include:

useState: for managing local state.
useEffect: for handling side effects like API calls.
useContext: for global state management.

7. React Router

React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic routing without requiring full-page reloads.

React Js

yaswanth krishna — Mon, 27 Oct 2025 05:18:12 +0000

What is Reactjs?

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability.

import React from 'react': Imports React to create components and use JSX.
function App() { ... }: Defines a functional component called App.
return ( ... ): Returns JSX that represents the UI (a div with an h1 tag displaying "Hello, World!").
export default App: Exports the App component so it can be used elsewhere.

React Work ?

React operates by creating an in-memory virtual DOM rather than directly manipulating the browser’s DOM. It performs necessary manipulations within this virtual representation before applying changes to the actual browser DOM.

Here’s how the process works:

1. Actual DOM and Virtual DOM

Initially, there is an Actual DOM(Real DOM) containing a div with two child elements: h1 and h2.
React maintains a previous Virtual DOM to track the UI state before any updates.

2. Detecting Changes

When a change occurs (e.g., adding a new h3 element), React generates a New Virtual DOM.
React compares the previous Virtual DOM with the New Virtual DOM using a process called reconciliation.

3. Efficient DOM Update

React identifies the differences (in this case, the new h3 element).
Instead of updating the entire DOM, React updates only the changed part in the New Actual DOM, making the update process more efficient.

while using 1 to 25 looping statements

yaswanth krishna — Mon, 03 Mar 2025 15:06:57 +0000

1 to 25 print them while loop using statement?

package hlo;

public class upperlinit {

    public static void main(String[] args) {
//      int no=1;

//      while(no<=5) {
//          System.out.println(no);
//          no=no+1;
//          
//      }
//      while(no<=10) {
//          System.out.println(no);
//          no=no+1;
//          
//      }
//      while(no<=15) {
//          System.out.println(no);
//          no=no+1;
//          
//      }
//      while(no<=20) {
//          System.out.println(no);
//          no=no+1;
//          
//      }
//      while(no<=25) {
//          System.out.println(no+"");
//          no=no+1;
//          
//      }

it's using hard task you take easy method calfare next code i will explain.

package hlo;

public class upperlimit {

    public static void main(String[] args) {
int no=1;
        int upper_limit=25;
        while(upper_limit<=25) {
            while(no<=25) {
                System.out.println(no);
                no=no+1;
            }
            System.out.println();
            upper_limit=upper_limit+5;
        }

    }

}

`output:
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25

While looping understand counts how to work and 10101 while using concept

yaswanth krishna — Mon, 03 Mar 2025 14:45:05 +0000

package hlo;

public class while5times {

    public static void main(String[] args) {
int times=1;
while(times<=5) {


        int no = 1;
        int count = 1;
        while (count <= 5) {
            no = no - 1;
            System.out.println(no + "");
            if (count== 5)
                break;
            no=no+1;
            System.out.println(no + "");
            count=count+2;
        }
        times=times+1;
        System.out.println();
}

        }

Step-by-Step Execution

Initial State Variable Value no 1 count 1
First Iteration (count = 1, while condition true)

no = no - 1; → 1 - 1 = 0
System.out.println(no); → Prints 0
if (count == 5) → count is 1, so break does not execute
no = no + 1; → 0 + 1 = 1
System.out.println(no); → Prints 1
count = count + 2; → 1 + 2 = 3
Second Iteration (count = 3, while condition true)

no = no - 1; → 1 - 1 = 0
System.out.println(no); → Prints 0
if (count == 5) → count is 3, so break does not execute
no = no + 1; → 0 + 1 = 1
System.out.println(no); → Prints 1
count = count + 2; → 3 + 2 = 5
Third Iteration (count = 5, while condition true)

no = no - 1; → 1 - 1 = 0
System.out.println(no); → Prints 0
if (count == 5) → Yes! break executes
The while loop terminates.

Additional Explanation

The value of no keeps alternating between 0, 1, 0, 1, 0.
The value of count increases as 1 → 3 → 5.
When count becomes 5, the break statement stops the loop.

`output:

10101
`

Thenali raman Story "logical thinking in Java"

yaswanth krishna — Mon, 24 Feb 2025 19:18:21 +0000

package hlo;

public class While {
    public static void main(String[]args) {
        int thenali=1024;
        int solider=thenali-1;
        int count=0;
        while(solider>=1) {
            solider=solider/2;
            count=count+1;
        }

        System.out.println(count);

        }

    }

output: 10

police thief while using "logical thinking"

yaswanth krishna — Mon, 24 Feb 2025 19:05:53 +0000

package hlo;

public class While {
    public static void main(String[]args) {
        int police=0;
        int thief=40;
        while(police<40) {
            police=police+5;
            thief=thief+2;
        }
        System.out.println(police);

        }

    }

output: 40

python using Eb bill basic

yaswanth krishna — Mon, 24 Feb 2025 19:00:12 +0000

units = int(input("Enter the total number of units: "))  

if units <= 100:
    bill = 0  
elif units <= 200:
    bill = (units - 100) * 2  
elif units <= 500:
    bill = (100 * 2) + (units - 200) * 5  
else:
    bill = (100 * 2) + (300 * 5) + (units - 500) * 8  

print(" Electricity Bill Amount: {bill})

output: Enter the total number of units: 5000 Electricity Bill Amount: ₹37700

While Loop Basics

yaswanth krishna — Mon, 24 Feb 2025 14:13:02 +0000

package hlo;

public class While {
    public static void main(String[]args) {
        int no=7;
    int count=1;               // 7=7+3=10 10=10-2=8
        while(count<=3) {
             no=no+3;
             System.out.print(no+ "   " );
             no=no-2;
             System.out.print(no+ "   " );
             count=count+1;



        }

    }

}
//Explanation:
//This is a simple alternating addition and subtraction series. In the first pattern, 3 is added; in the second, 2 is subtracted.
//Look at this series: 7, 10, 8, 11, 9, 12, ... What number should come next?

Output: 10 8 11 9 12 10

why use count?

You're wondering if the count variable, that is incremented as count = count + 1, can be changed to increase by 2 (count = count + 2), or if we could use subtraction, multiplication, or division within the while loop.
Answer:
Yes, you may change count in any way you want.
If you set count = count + 2, the loop will execute half as often because count is incremented by 2 rather than by 1.
If you use count = count - 1, the loop may never end (infinite loop) if you do not establish proper conditions.
If you use multiplication (count = count * 2), the loop will expand exponentially and terminate long before.
If you use division (count = count / 2), the value will reduce, and based on the condition, it may never meet the stopping criteria or stop prematurely.
The idea is to reduce count cautiously in relation to the number of times you wish to repeat the loop.

While Loop Basics

yaswanth krishna — Mon, 24 Feb 2025 13:24:01 +0000

package hlo;

public class While {
    public static void main(String[]args) {
        int no=4;
    int count=4;
        while(no<=100) {

            System.out.println(no);
            no=no*4;
             count=count+4;
             System.out.println(count);
        }

    }

}
 output:16 12 64 16

While Loop Basics

yaswanth krishna — Mon, 24 Feb 2025 12:54:41 +0000

package hlo;

public class While {
    public static void main(String[]args) {
        int no=2;

          //0  //2 //5
---------->  while(no<=5) {
    "From 2 to 5, inclusive, anything less than or equal to."
            System.out.println(no);
            no=no+1; //2=2+1 =3
                                 // 3=3+1=4
                                 // 4=4+1=5
        }

    }

}