Conditional Rendering

React has a tutorial on different ways to conditionally render JSX and can be found here.

Conditionally Including JSX

​

Doing it this way is discouraged

​Conditional (ternary) operator (? :) 

​

This is how you do 'if else' statements​

Avoid having nested ternary operators​

Nested ternary operators may indicate you need create more components​

It is okay to have multiple components to the same file (so don't hesitate to add more if improves maintanibility)​

Logical AND operator (&&) 

Equivalent to ngIf in angularjs

Style​

Ternary Operators can get makes things look messy quick, so it's important to style it appropriately. 

The following is example of how one might use a ternary on two larger pieces of JSX.

Notice how the ':' is the only thing on the line to really help differentiate what is the if block and what is in the else block.

Notice also the use the && operator throughout the JSX.

 return (
        <>
            <Card.Title tag={Link} to={RoutePath.Portfolios} className='no-decoration' size='lg' bold icon={{ ...icons.favoritesIcon, pull: 'left', color: colors.utopiaHeart, size: 'md' }}>
                { !!favoritesPortfolio ? favoritesPortfolio.name : 'Favorites' }
            </Card.Title>
            
          {((!!isLoading || !!errorLoading || !user)) ?
                <>
                    {(!!isLoading || !user) &&
                        <SkeletonTheme enableAnimation height='24px' width='85%'>
                            <Skeleton count={NUM_NODES/2} className='mb-3 ms-4 me-4'/>
                        </SkeletonTheme>
                    }

                    {!!errorLoading &&
                        <Card.Text>There was an issue when loading your favorite nodes.</Card.Text>
                    }
                </>
                :
                <>
                    {(!favoritesPortfolio) &&
                        <Card.Text>No portfolio has been set as the Favorites portfolio. Right-click a portfolio in the My Portfolios page to set a Favorites portfolio.</Card.Text>
                    }

                    {(favoritesPortfolio?.nodes.length == 0) &&
                        <Card.Text>No favorites selected yet. Right-click files or folders and choose “Add To Portfolio” to add to Favorites.</Card.Text>
                    }
                    
                    {favoritesPortfolio?.nodes.slice(0, NUM_NODES).map((node) => (
                        <Card.Link key={node.id} tag={Link} to={`${RoutePath.GoToNode}/${node.id}`} className='ms-4 my-3' icon={{ ...icons.getItemIcon(node.systemType, node.fileInfo?.fileExtension), size: 'md' }}>
                            <TooltipItem innerClassName='truncated-text' id={node.id} message={node.name}>
                                {node.name}
                            </TooltipItem>
                        </Card.Link>
                    ))}

                    {(!!favoritesPortfolio && favoritesPortfolio.nodes.length >= NUM_NODES) &&
                        <div className='d-flex justify-content-center'>
                            <Button color='primary' emphasis='low' onClick={() => navigate(RoutePath.Portfolios)}>See all</Button>
                        </div>
                    }
                </>
            }
        </>
    );