React Condition Rendering

 Condition Rendering :

Conditional rendering in React allows you to render different components or elements based on certain conditions. You can use JavaScript's if statements, ternary operators, or other conditional logic within your JSX to achieve this. Here's an example of conditional rendering in React:

ConditionRendering.js:

import React from 'react';

class ConditionRendering extends React.Component{

//condition Redering

constructor(){

   super();

   this.state={isLogedIn:false}

  }

//handleLogin

 handleLogin=()=>{

   this.setState({isLogedIn:true});

 }

  //handleLogout

handleLogout=()=>{

   this.setState({isLogedIn:false});

}

  render(){

    const {isLogedIn}=this.state;

      return<div>

       <h1>Condition Rendering Example</h1>

       {isLogedIn ?(

         <div>

            <p>Welcome to the User!</p>

            <button onClick={this.handleLogout}>Logout</button>

         </div>

       )

       

       :(

         <div>

       <p>Please Login to access the content</p>

         <button onClick={this.handleLogin}>Login</button>

         </div>

       

       )}

      </div>

   }

}

export default ConditionRendering;

App.js:

import React from "react";

import ConditionRendering from "./condition";

function  App(){

  return <div>

  <ConditionRendering/>

  </div>

}

export default App;