Javascript – Issue with Conditional Rendering in React Custom Component

I’m facing an issue with conditional rendering in a custom component in my React application. I’ve been working on creating a custom component for conditional rendering that renders content only when a specific condition is met. Here’s the code I have so far

import React from 'react';

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children}
    </div>
  );
}

export default ConditionalRenderComponent;

While using this custom component, I noticed that the content passed through the children prop is being accessed and executed even when the condition is false. This behavior is different from when I directly use condition && <div></div> without a custom component, which correctly prevents the content from being accessed when the condition is false.

Here’s how I’m using the custom component:

import React, { useState, useEffect } from 'react';
import ConditionalRenderComponent from './ConditionalRenderComponent';

function App() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        username: 'john_doe',
        email: '[email protected]'
      });
    }, 1000);
  }, []);

  return (
    <div>
      <h1>Welcome to My App</h1>
      <ConditionalRenderComponent condition={isLoggedIn}>
        <div>
          <p>Hello, {userData.username}!</p>
          <p>Your email: {userData.email}</p>
        </div>
      </ConditionalRenderComponent>
      {!isLoggedIn && <p>Please log in to access user data.</p>}
    </div>
  );
}

export default App;

In the example above, the userData is initially null and later populated with data retrieved from the server. The isLoggedIn condition depends on whether the userData is populated.

However, even when the isLoggedIn condition is false (before the data is fetched), the content inside the ConditionalRenderComponent still tries to access and display the userData. This leads to the error message: "TypeError: Cannot read properties of null (reading ‘username’)".

Comparison with standard conditional rendering:

Below is a comparison of the behavior using the standard condition && <div></div> approach:

// Standard conditional rendering
{isLoggedIn && (
  <div>
    <p>Hello, {userData.username}!</p>
    <p>Your email: {userData.email}</p>
  </div>
)}

As shown in the above code, using the standard approach correctly prevents accessing the userData values when the condition is false.

I’m not sure why this difference in behavior is occurring when using a custom component with the children prop. I’ve tried debugging and searching for solutions, but I haven’t been able to find a clear answer.

I’d really appreciate any insights or suggestions on why this behavior might be happening and how I can modify the custom component to achieve the expected conditional rendering behavior using the children prop.

Thank you in advance for your help!