Conditional Rendering in React

Conditionally rendering content is a pretty common pattern in React components. class MyComponent extends Component { render() { const { user } = this.props; return ( {user && {user.name}} {/* other content */} ); } } This can quickly get messy when you introduce multiple parmeters or large conditional content blocks render() { const { user, profile, otherData } = this.props; const shouldDisplayProfile = user && profile && otherData; return ( {shouldDisplayProfile && } {/* other content */} ); } And don't even mention ternary operators. Nothing better than scrolling through a component and finding : null} with no context Wrapping Dependent Content In React, our unit of reuse is usually a component so can we move this behaviour into a component? const example = ( only render this content if all of user, profile & otherData are defined ); It turns out that this is actually a pretty simple component: determine if the all prop values are truthy only render the children if they are interface OnlyIfProps { all: T; } class OnlyIf extends PureComponent { render() { const { all, children } = this.

✔ Read More...

I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

Development,JavaScript,React,TypeScript,software-development,web