🀒Boolean Condition using useState

import React, { useState } from 'react';

const MyComponent = () => {
  // Define a state variable and a function to update it
  const [isConditionMet, setIsConditionMet] = useState(false);

  // Function to toggle the state
  const toggleCondition = () => {
    setIsConditionMet(!isConditionMet);
  };

  return (
    <div>
      <button onClick={toggleCondition}>Toggle Condition</button>

      {/* Conditional rendering based on the state value */}
      {isConditionMet ? (
        <div>
          <p>This div is rendered when the condition is true.</p>
        </div>
      ) : (
        <div>
          <p>This div is rendered when the condition is false.</p>
        </div>
      )}
    </div>
  );
};

export default MyComponent;

Last updated