Conditionals Rendering

Conditional rendering in React involves rendering different content or components based on certain conditions.

This can be achieved using Javascript expressions and conditional statements within your JSX code.

Conditionals Statement Rendering Example:

if Statement:

Example:

import React from 'react';

const YourConditionalComponent = ({ isConditionTrue }) => {
  if (isConditionTrue) {
    return <p>IF Condition is True</p>;
  } else {
    return <p>IF Condition is False</p>;
  }
};

export default YourConditionalComponent;

we have defined a functional component `YourConditionalComponent` render content using the `if` statement that takes an `isConditionTrue` variable as a prop.
If the `isConditionTrue` is true, we will render a message "IF Condition is True" Otherwise, "IF Condition is False".

Using Ternary Operator:

Example:

import React from 'react';

const YourConditionalComponent = ({ condition }) => {
  return (
    <article>
      {condition ? (
        <p>Ternary Condition is True</p>
      ) : (
        <p>Ternary Condition is False.</p>
      )}
    </article>
  );
};

export default YourConditionalComponent;

we have defined a functional component `YourConditionalComponent` render content using the `Ternary` operator statement that takes a `condition` variable as a prop.
If the `condition` is true, we will render a message "Ternary Condition is True" Otherwise, "Ternary Condition is False".

Using Logical AND (&&) Operator:

Example:

import React from 'react';

const YourConditionalComponent = ({ condition }) => {
  return (
    <article>
      {condition && <p>This content is rendered when the condition is true.</p>}
    </article>
  );
};

export default YourConditionalComponent;

we have defined a functional component `YourConditionalComponent` to render content using the `AND` operator statement that takes a `condition` variable as a prop.
If the `condition` is true, we will render a message "This content is rendered when the condition is true." Otherwise, no content will be displayed.

Using switch Statements:

Example:

import React from 'react';

const YourConditionalComponent = ({ caseChecking }) => {
  switch (caseChecking) {
    case 'addition':
      return <p>Render UI Logic for Addition.</p>;
    case 'subtract':
      return <p>Render UI Logic for Subtract</p>;
    default:
      return <p>Render default UI Logic for Multiplication.</p>;
  }
};

export default YourConditionalComponent;

we have defined a functional component `YourConditionalComponent` render content using a switch statement that takes a `caseChecking` variable as a prop.
If the `caseChecking` value is `addition`, we will render a message "Render UI Logic for Addition.".
If the `caseChecking` value is `subtract`, we render a "Render UI Logic for Subtract".
If no condition matches then, we render a "Render default UI Logic for Multiplication.".

Components Conditional Rendering:

Example:

import React from 'react';

const YourConditionalComponent = ({ condition }) => {
  const renderContent = () => {
    if (condition) {
      return <p>Hello, Alice</p>;
    } else {
      return <p>False condition context will get display</p>;
    }
  };

  return (
    <div>
      {renderContent()}
    </div>
  );
};

export default YourConditionalComponent;

we have defined a functional component `YourConditionalComponent` that takes a `isConditionTrue` variable as a prop.
Inside the component, we use an if statement to check the `isConditionTrue` prop.
If `isConditionTrue` is true, we will render a message "Hello, Alice".
If `isConditionTrue` is false, we will render a "False condition context will get display" message.

<-- React Events

React Lists -->