--- title: Stop rendering conditions like this | daily.dev description: The post discusses a more efficient way to handle conditional rendering in React applications. Instead of using multiple if-else blocks or ternary operators,... canonical: https://daily.dev/posts/gsthzyezk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Stop rendering conditions like this | daily.dev og:description: The post discusses a more efficient way to handle conditional rendering in React applications. Instead of using multiple if-else blocks or ternary operators,... og:url: https://daily.dev/posts/gsthzyezk og:image: https://api.daily.dev/og/posts/gSThzyEZK.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Stop rendering conditions like this **[Dev Squad](https://daily.dev/sources/devsquad)** · [@mdhassanpatwary](https://daily.dev/mdhassanpatwary) · 1700 upvotes · 48 comments ## Summary The post discusses a more efficient way to handle conditional rendering in React applications. Instead of using multiple if-else blocks or ternary operators, it suggests grouping user actions into an object and rendering based on the object's keys. This method is easier to read, debug, and update while reducing the overall code. It also covers handling undefined user types with a default key and using the null coalescing operator to ensure correct rendering. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@kszyh** · 11 upvotes > Not so long ago there was a project called babel-plugin-jsx-control-statements. But I think it is currently abandoned. I haven't seen an equivalent for vite or rsbuild. **@tdlm** · 8 upvotes > Nice post. However, this is such a specific use case that it's hard to extract a ton of value from the post. **@abdoseadaa** · 3 upvotes > thanks for sharing, i appreciated this contribution 🤍 **@thomas75** · 3 upvotes > The other day there was a post on HN regarding avoiding overly eager configurations and instead just relying on rendering `jsx` conditionally. The problem is that if all of a sudden `` will require a new prop (class for the delete action for example) then the configuration object has to now contain css classes or some other key/value pair. > > Maybe something similar to this could be useful. > > ``` > type UserType = 'admin' | 'editor' | 'user'; > > type User = { name: string; type: UserType }; > > const users: User[] = [ > { name: 'john', type: 'admin' }, > { name: 'mike', type: 'editor' }, > {... **@virumabharathi** · 3 upvotes > Yes, especially for complex conditional rendering, defining a rule in an object is an efficient way to handle this. As you mentioned, it will improve code readability and also make it more customizable. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/gsthzyezk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/gsthzyezk","headline":"Stop rendering conditions like this","text":"Shared: Stop rendering conditions like this","url":"https://daily.dev/posts/gsthzyezk","datePublished":"2024-07-16T11:16:22.622Z","dateModified":"2024-07-16T11:16:50.451Z","author":{"@type":"Person","name":"MD Hasan Patwary","url":"https://daily.dev/mdhassanpatwary","image":"https://media.daily.dev/image/upload/s--Q15xdUBK--/f_auto/v1756538528/avatars/avatar_pnxOyAOcjfEL2wZw2TFjM?_a=BAMClqZW0","description":"React, Next.js, TypeScript | UI/UX Specialist | Scalable Web Apps | 6+ Years | Open to Remote","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":2200}},"image":"https://media.daily.dev/image/upload/s--2-1xRawN--/f_auto/v1722860399/public/Placeholder%2011","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1700},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":48}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/dZZsR7Dom"},"comment":[{"@type":"Comment","text":"Not so long ago there was a project called babel-plugin-jsx-control-statements. But I think it is currently abandoned. I haven’t seen an equivalent for vite or rsbuild.","datePublished":"2024-07-16T13:23:21.511Z","url":"https://daily.dev/posts/gSThzyEZK#c-gYtRrRT45","author":{"@type":"Person","name":"Krzysztof","url":"https://daily.dev/kszyh","image":"https://avatars.githubusercontent.com/u/2268743?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11}},{"@type":"Comment","text":"Nice post. However, this is such a specific use case that it’s hard to extract a ton of value from the post.","datePublished":"2024-07-16T18:19:15.729Z","url":"https://daily.dev/posts/gSThzyEZK#c-Xue6gxjp8","author":{"@type":"Person","name":"Scott","url":"https://daily.dev/tdlm","image":"https://media.daily.dev/image/upload/s--E1sPmqCc--/f_auto/v1778693132/avatars/avatar_ClyEYIbsIwrvUhZiWITas?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8}},{"@type":"Comment","text":"thanks for sharing, i appreciated this contribution 🤍","datePublished":"2024-07-16T15:07:27.530Z","url":"https://daily.dev/posts/gSThzyEZK#c-CHsI20Wrp","author":{"@type":"Person","name":"abdelrahman seada","url":"https://daily.dev/abdoseadaa","image":"https://media.daily.dev/image/upload/s--6TGOrrMz--/f_auto/v1724691617/avatars/avatar_yQ7NCGJqFy8W6992sp4Oi"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"The other day there was a post on HN regarding avoiding overly eager configurations and instead just relying on rendering jsx conditionally. The problem is that if all of a sudden <Action /> will require a new prop (class for the delete action for example) then the configuration object has to now contain css classes or some other key/value pair.\nMaybe something similar to this could be useful.\ntype UserType = 'admin' | 'editor' | 'user';\n\ntype User = { name: string; type: UserType };\n\nconst users: User[] = [\n { name: 'john', type: 'admin' },\n { name: 'mike', type: 'editor' },\n { name: 'abdelrahman', type: 'user' },\n];\n\nfunction UserActions({ user }: { user: User }) {\n let allowedActions = [];\n\n switch (user.type) {\n case 'admin':\n allowedActions = ['create', 'update', 'read', 'delete'];\n break;\n case 'editor':\n allowedActions = ['create', 'update'];\n break;\n case 'user':\n allowedActions = ['read'];\n break;\n }\n\n return (\n <div key={user.name}>\n <p>{user.name}</p>\n <div>\n {allowedActions.includes('create') && <Action a={'create'} />}\n {allowedActions.includes('read') && <Action a={'read'} />}\n {allowedActions.includes('update') && <Action a={'update'} />}\n {allowedActions.includes('delete') && <Action a={'delete'} />}\n </div>\n </div>\n );\n}\n\nexport default function Test() {\n return (\n <div>\n {users.map((user) => {\n return <UserActions user={user} />;\n })}\n </div>\n );\n}\n\nfunction Action(props: { a: string }) {\n const { a } = props;\n return <p>{a}</p>;\n}","datePublished":"2024-08-01T06:48:35.790Z","url":"https://daily.dev/posts/gSThzyEZK#c-Fg5aK7UWs","author":{"@type":"Person","name":"Thomas","url":"https://daily.dev/thomas75","image":"https://avatars.githubusercontent.com/u/2585243?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Yes, especially for complex conditional rendering, defining a rule in an object is an efficient way to handle this. As you mentioned, it will improve code readability and also make it more customizable.","datePublished":"2024-07-17T04:58:20.636Z","url":"https://daily.dev/posts/gSThzyEZK#c-9BgbRcWEo","author":{"@type":"Person","name":"Viruma Bharathi","url":"https://daily.dev/virumabharathi","image":"https://lh3.googleusercontent.com/a/ACg8ocI-hF4JXTjermGLsOmh1YqBoIsXFJP1QC7EOTfiVsIWB6cPqnkZ=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/devsquad","name":"Dev Squad"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Squad","item":"https://daily.dev/squads/devsquad"},{"@type":"ListItem","position":3,"name":"Stop rendering conditions like this"}]} ```