🦂Conditional Rendering of Elements or Components

Rendering HTML element based on Condition.

const ValidPassword = () => <h1>Valid Password</h1>;
const InvalidPassword = () => <h1>Invalid Password</h1>;

const Password = ({ isValid }) => {
  if (isValid) {
    return <ValidPassword />;
  }
  return <InvalidPassword />;
};

const App = () => {
  return (
    <section>
      <Password isValid={true} />
    </section>
  );
};

export default App;

Rendering component based on Condition.

function Cart() {
  const items = ["Wireless Earbuds", "Power Bank", "New SSD", "Hoddie"];

  return (
    <>
      <h1>Cart 🛒</h1>
      {items.length > 0 && <h2>You have {items.length} items in your Cart.</h2>}

      <ul>
        <h4> 👇Products </h4>
        {items.map((item) => (
          <li key={Math.random()}>{item}</li>
        ))}
      </ul>
    </>
  );
}

import Cart from "./Cart.Jsx"

const App = () => {
  return (
    <section>
        <Cart />;
    </section>
  );
};

export default App;