Conditional Rendering In React JS

React JS Conditional Rendering

• When you are building react applications you may often need to show or hide some HTML based on a certain condition.
• Luckily conditional rendering in react works the same way conditions works in JavaScript.
• In React, you can conditionally render components.

There are several ways to do this.

1. if else Statement
2. Logical && Operator
3. Ternary Operator

if else Statement in React JS

We can use the if JavaScript statement to decide which component to render.

Logical && Operator in React JS

Another way to conditionally render a React component is by using the && operator.

Ternary Operator in React JS

Another way to conditionally render elements is by using a ternary operator.

Element Variables in React JS

You can use variables to store elements.

Source Code

Component1.js File Code – Functional Component

import React from 'react'

function Component1() {
  return (
    <div>
      <h1>Hey Adil How Are You ?</h1>
    </div>
  )
}

export default Component1

Component2.js File Code – Functional Component

import React from 'react'

function Component2() {
  return (
    <div>
      <h1>You Are Not Adil, Who Are You ?</h1>
    </div>
  )
}

export default Component2

App.js File Code – Functional Component

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';

function App() {
    // const name = "Adil";
    // if (name == "Adil") {
    //     return <Component1 />
    // }
    // else {
    //     return <Component2 />
    // }
    // const name = "Ali";
    // let data;
    // if (name == "Adil") {
    //     data = <Component1 />
    // }
    // else {
    //     data = <Component2 />
    // }

    const name = "Prem";
    const age = 15;
    return(
        <div>
            {name == "Adil" ? <Component1/> : <Component2/>}
            {/* { age >= 18 ? <h1>You Can Vote</h1> : <h1>You Cannot Vote</h1> } */}
            {/* { name == "Adil" && <h1>Hello Adil</h1> } */}

            {/* { data } */}
        </div>
    )
}

export default App

NewComponent.js File Code – Class Component

import React, { Component } from 'react';
import Component1 from './Component1';
import Component2 from './Component2';

export default class NewComponent extends Component {
constructor(props) {
  super(props)

  this.state = {
     name : "Adil"
  }
}


  render() {

    // const name = "Adil";
    if (this.state.name == "Adil") {
        return <Component1 />
    }
    else {
        return <Component2 />
    }

    // return (
    //   <div>
        
    //   </div>
    // )
  }
}

Index.js File Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
     {/* <App/> */}
     <NewComponent/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/r7p2wvvbrkpcy1l/CONDITIONAL+RENDERING+React+JS.rar/file