Rendering Conditional Components with Clean?Code?

By implementing these conditional component rendering alternative approaches and following these tips, you can achieve cleaner and more maintainable code for rendering conditional components in your React applications.

Assume that we have a common approach to rendering conditional components based on order status.?

<div className='container mx-auto'>
  {
    orderDetails?.status == 1 ?
        <AcceptOrder orderDetails={orderDetails} />
        : null
  }
  {
    orderDetails?.status == 2 ?
        <PrepareOrder orderDetails={orderDetails} productDetails={productDetails} />
        : null
  }
  {
    orderDetails?.status == 4 ?
        <SubmitToQA orderDetails={orderDetails} productDetails={productDetails} orderProcessedDetails={orderProcessedDetails} />
        : null
  }
  {
    orderDetails?.status == 5 ?
        <QAAnalyze orderDetails={orderDetails} productDetails={productDetails} orderProcessedDetails={orderProcessedDetails} />
        : null
  }
  {
    orderDetails?.status == 6 ?
        <Dispatch orderDetails={orderDetails} productDetails={productDetails} orderProcessedDetails={orderProcessedDetails} />
        : null
  }
  {
    orderDetails?.status == 8 ?
        <Delivery orderDetails={orderDetails} productDetails={productDetails} orderProcessedDetails={orderProcessedDetails} />
        : null
  }
  {
    orderDetails?.status == 9 ?
        <Payment orderDetails={orderDetails} productDetails={productDetails} orderProcessedDetails={orderProcessedDetails} />
        : null
  }
</div>        

However, this approach with nested ternary operators can become cumbersome and difficult to maintain as the number of conditions increases.

Here are some alternative approaches that promote cleaner code:

1. Using a Switch Statement:

const orderComponent = () => {
  switch (orderDetails?.status) {
    case 1:
      return <AcceptOrder orderDetails={orderDetails} />;
    case 2:
      return <PrepareOrder orderDetails={orderDetails} productDetails={productDetails} />;
    // ... other cases
    default:
      return null;
  }
};        

This approach offers a cleaner structure for handling multiple conditions, making the code more readable and easier to modify.

2. Helper Function for Conditional Rendering:

const renderConditionalComponent = (status, component) => {
  return orderDetails?.status === status && <component orderDetails={orderDetails} {...otherProps} />;
};

const orderView = (
  <>
    {renderConditionalComponent(1, AcceptOrder)}
    {renderConditionalComponent(2, PrepareOrder)}
    {/* ... other cases */}
  </>
);        

This approach promotes code reusability by creating a helper function that takes the status and the corresponding component as arguments. It improves readability and reduces code duplication.

3. JSX Fragments for Grouping Conditional Components:

return (
  <>
    {orderDetails?.status === 1 && <AcceptOrder orderDetails={orderDetails} />}
    {orderDetails?.status === 2 && <PrepareOrder orderDetails={orderDetails} productDetails={productDetails} />}
    {/* ... other cases */}
  </>
);        

This approach leverages JSX fragments to group the conditional rendering without introducing unnecessary elements like empty div’s. It keeps the JSX clean and concise.

Choosing the Right Approach & Some Takeaways:

The best approach depends on the complexity of your conditional rendering logic. If you have a limited number of conditions, a switch statement might be sufficient. However, for a more extensive set of conditions, the helper function or JSX fragments with early returns offer better maintainability and readability as your code grows.

• Consider using descriptive variable names for the components and props to enhance code clarity.
• If the components share common props, extract them into a separate component to avoid prop drilling.
• Utilize comments to explain complex logic within your conditional rendering.

For more Full Stack Development Tips and Knowledge: https://linktr.ee/mawaisshaikh